Child Scope not changing parent scope

Question

I have two directives and am trying to filter a table based on a select box. I am using ui.bootstrap to create an accordion to hold the form. For some reason my form will not change the parent scope when clicked. I though "=" should change the parent scope but it doesn't seem to do anything IE: I would like to select DATE, Line Item, Creative, and then see only those fields in the table.

//table.js

var TableCtrl = function($scope,$rootScope){
  $scope.headings = ['Date', 'Creative', 'Line item',
                       'Interactive impressions','Interaction time',
                       'Total interactions','Ad server clicks', 'Average interaction time'];


  $scope.selectedHeadings = ['Date', 'Creative', 'Line item',
                               'Interactive impressions','Interaction time',
                               'Total interactions','Ad server clicks', 'Average interaction time'];
app.directive('campaignStatsTable',function(){
  return {
    $scope: true,
    restrict: 'EA',
    replace: 'true',
    templateUrl: './views/templates/tables/table.html'
  };
});

app.directive('tableFilter',function(){
  return {
    $scope: "=",
    restrict: 'EA',
    replace: 'true',
    templateUrl: './views/templates/tables/table-filter.html'
  };
});

app.controller('TableCtrl', ['$scope' ,'$rootScope', TableCtrl]);

My main html page

<accordion>
    <accordion-group heading="Click to Edit Filtering Options">
        <table-filter></table-filter>
    </accordion-group>
  </accordion>

My form template

<form id="table-filters" role="search">
  <div class="form-group">
    <select id='headerSelection' multiple ng-multiple=true ng-show='headings' ng-model="selectedHeadings" ng-options="heading for heading in headings"></select>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Line Item ID" ng-model="LineItemID">
  </div>
</form>

My table template

<table class="table table-striped">
  <th ng-repeat="header in selectedHeadings">
    {{header}}
  </th>
  <tr ng-repeat="item in tableRecords | filter:Date | filter:line_item " item='item'>
    <td ng-repeat="header in selectedHeadings" id='{{header}}' ng-href='#'>
      <div ng-if="header == 'Date'">
        {{item[header] | date:'EEE, MMM, dd'}}
        <i class="btn fa fa-bar-chart" ng-click="refreshGraph(data,header, item[header])"></i>
      </div>
      <div ng-if="header != 'Date'">
        {{item[header]}}
        <i class='btn fa fa-bar-chart' tooltip='Click to sort the chart using this value' ng-if="['Creative', 'Line item'].indexOf(header) > -1" ng-click="refreshGraph(data,header, item[header])" ></i>
      </div>
    </td>
  </tr>
</table>

try `ng-model="$parent.selectedHeadings"`, ngModel looks on the controllers `scope` not on every `scope`, you have it assigned to the `rootScope`. Let me know if that helps. — jnthnjns, Sep 18 '14 at 15:20
Prepend the `$parent.` to all instances of `selectedHeadings` you have in the html under this controller. — jnthnjns, Sep 18 '14 at 15:22

score 0 · Answer 1 · edited May 23 '17 at 10:33

I figured it out. I had already the $parent.selectedHeadings everywhere and it didnt seem to cahnge the behavior. After turning $scope.selectedHeadings into an object it began working as expected. IE:

$scope.selectedHeadings = {names: ['Date', 'Creative', 'Line item',
                                   'Interactive impressions','Interaction time',
                                   'Total interactions','Ad server clicks', 'Average interaction time']

and change all references to selectedHeadings in the HTML to selectedHeadings.names

Here's a link to the StackOverflow answer that helped.

https://stackoverflow.com/a/21270386/2007602

The main part being

Incorrect:

ng-model="selectedIcon"

Correct:

ng-model="obj.selectedIcon"

Child Scope not changing parent scope

1 Answers1