棱角分明，增加范围正在打破我的指令

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()都是在控制器的作用域中定义的，指令无法访问它们，因为它有自己的专用作用域。

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

1. 使用$parent.filter和$parent.filterChange();

2. 将filter和filterChange添加到指令的隔离范围：

   scope: {
     filter: '=',
     filterChange: '&'
   }
   

我建议#2。这是您更新的小提琴。