Question

我有两个指令，我正在尝试根据选择框过滤表格。我正在使用ui.bootstrap创建一个手风琴来保存表单。出于某种原因，单击时我的表单不会更改父作用域。我虽然“=”应该更改父作用域但它似乎没有做任何IE：我想选择DATE，行项目，广告素材，然后只查看表格中的那些字段。

//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转换为对象后，它开始按预期工作。 IE：

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

子范围不改变父范围

1 个答案: