角度来看，增加范围违反了我的指令

Question

I am having trouble getting this directive to work properly, It was working fine until I tried adding a scope to link a function. Here's what I have so far

The directive (in requirejs format hence the module/component name stuff) :

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

The controller

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

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

        }
    ]);

The template:

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

Where it is being used (and maybe some of the issue is it's being repeated?)

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

So if I take out the scope from the directive it works fine. If i add it in, there are no errors in console but nohting shows up.

If I remove this, it works :

scope: {
        filterFn: '='
        },

Can't seem to figure out why. Could use some ideas.

Edit: added fiddle here https://jsfiddle.net/vt1uasw7/31/ - you will notice if you remove the scope part of the directive, everything shows up fine.

Answer 1

When you do scope: { ... } in a directive, you're telling Angular to create an isolate scope , which is a scope that doesn't prototypally inherit from any other scope.

Now, take a look at your directive's template:

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

Both filter and filterChange() are defined in the controller's scope, and your directive can't access them because it has its own private scope.

You can fix your code by doing one of two things:

1. Use $parent.filter and $parent.filterChange() ;

2. Add filter and filterChange to the directive's isolate scope:

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

I suggest #2. Here 's your updated fiddle.