Angularjs 子作用域不更改父作用域

我有两个指令，正在尝试根据选择框筛选表。我正在使用ui.bootstrap创建一个手风琴来保存表单。由于某些原因，我的表单在单击时不会更改父范围。我认为“=”应该更改父范围，但它似乎没有做任何事情，例如：我想选择日期、行项目、创造性，然后只查看表中的那些字段

//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]);

我的html主页

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

我的表单模板

<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>

我的表格模板

<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>

{{header}}
{{项目[标题]|日期：'EEE，MMM，dd'}
{{item[header]}

我想出来了。我已经到处都有$parent.selectedheaders了，但它似乎并没有影响到我的行为。将$scope.selectedHeadings转换为对象后，它开始按预期工作。 即：

并将HTML中对selectedHeadings的所有引用更改为selectedHeadings.names

这里有一个链接，指向有帮助的StackOverflow答案

主要部分是

不正确：

ng-model="selectedIcon"

正确：

ng-model="obj.selectedIcon"

---

请尝试

ng model=“$parent.selectedHeadings”

，ngModel会查看控制器

范围

而不是每个

范围

，您已将其分配给

根范围

。如果有帮助，请告诉我。将

$parent.

添加到此控制器下html中的

selectedHeadings

的所有实例。

ng-model="obj.selectedIcon"