javascript - 在指令链接函数中访问作用域上的函数

Question

我的指令设置如下:

angular.module("app", []).directive("myDirective", function(){

    return {

       scope: {},
       link: function($scope){

           $scope.myFunction = function(){
                //Do DOM manipulation
           }

       }

    }


});

在我的 html 中我只是有

<div my-directive>
    <a href="" ng-click="myFunction()">Click Me</a>
</div>

当我单击“Click Me”时，控制台不会打印任何内容，但是，如果我删除范围属性或将其更改为 scope:true 那么它会按预期工作。我知道这与隔离范围有关，但我不完全理解发生了什么。我想要一个隔离范围，因为这将是一个模块化指令，我将在许多不同的项目中使用。

注意:我使用的是 Angular 1.4.6

更新:该函数需要进行 DOM 操作。这就是为什么它位于链接函数中。

Answer 1

这不起作用的原因是 link 的使用方式。

由于元素在指令存在之前就已存在于指令中，因此这些元素不会使用 link 中的信息进行编译。要获得您想要的内容，您需要将这些元素放入 template 或 templateUrl 中，以便可以针对 link 进行编译。

这是一个例子:

angular.module("myApp", []).directive("myDirective", function() {
      return {
        scope: {},
        template: '<a href="" ng-click="myFunction()">Click Me {{value}}</a>',
        link: function(scope) {
          scope.value = 'Value here';
          scope.myFunction = function() {
            console.log('you are here.');
          }
        }
      }
    });

<script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<div ng-app="myApp">
  <div my-directive>
    <a href="" ng-click="myFunction()">Click Me {{value}}</a>
  </div>
</div>