子作用域不更改父作用域

Question

我有两个指令，正在尝试根据选择框过滤表。我正在使用ui.bootstrap创建一个手风琴来容纳表单。由于某些原因，我的窗体在单击时不会更改父范围。我认为"=“应该改变父作用域，但它似乎没有做任何事情IE:我想选择DATE，Line Item，Creative，然后只看到表中的那些字段。

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

Answer 1

我想通了。我已经到处都有$parent.selectedHeadings了，但它似乎不能控制我的行为。在将$scope.selectedHeadings转换为对象后，它开始按预期工作。即：

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

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

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

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

主要的部分是

不正确：

ng-model="selectedIcon"

正确：

ng-model="obj.selectedIcon"