Question

我无法使此指令正常工作，在我尝试添加范围以链接函数之前，它工作正常。这是我到目前为止所拥有的

指令（以requirejs格式，因此是模块/组件名称）：

  angular.module(metadata.moduleName, [
        filterFieldControl.moduleName
    ]).directive(metadata.componentName,
        function(scope) {
            return {
                controller: filterFieldControl.componentName,
                restrict: 'C',
                replace: true,
                scope: {
                    filterFn: '='
                },
                template: builderResultFiltersHTML
            };
        }
    );

控制器

 angular.module(metadata.moduleName, []).controller(metadata.componentName, [
        '$scope',
        function($scope) {

            $scope.filterChange = function() {
                $scope.filterFn();
            };

        }
    ]);

模板：

  <div>
<ul>{{filter.name}}
    <li ng-repeat="value in filter.values">
        <input type="checkbox" ng-model="filterObject[filter.name][value]" ng-change="filterChange()">{{value}}
    </li>
</ul>

使用它的地方（也许有些问题是它被重复了？）

   <div ng-repeat="result in searchResults.results" class="builder-search-result" filter-fn="filterClicked" ></div>

因此，如果我从指令中取出范围，它可以正常工作。如果我添加它，控制台中没有错误但nohting显示。

如果我删除它，它可以工作：

scope: {
        filterFn: '='
        },

似乎无法找出原因。可以使用一些想法。

编辑：在这里添加小提琴https://jsfiddle.net/vt1uasw7/31/ - 您会注意到如果删除指令的范围部分，一切都显示正常。

Answer 1

当您在指令中执行scope: { ... }时，您告诉Angular创建隔离范围，这是一个不会从原型继承任何其他范围的范围。

现在，看一下你的指令模板：

<div>in
  <ul>{{filter.name}}
    <li ng-repeat="value in filter.values">
      <input type="checkbox" ng-change="filterChange()">{{value}}
    </li>
  </ul>
</div>

filter和filterChange()都在控制器的范围内定义，并且您的指令无法访问它们，因为它有自己的私有范围。

您可以通过执行以下两项操作之一来修复代码：

使用$parent.filter和$parent.filterChange();
将filter和filterChange添加到指令的隔离范围：
```
scope: {
  filter: '=',
  filterChange: '&'
}
```

我建议＃2。 Here是你的最新小提琴。

Angular，添加范围违反了我的指令

1 个答案: