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

时间:2015-10-02 20:42:16

标签: javascript angularjs angularjs-directive

我的指令设置如下:

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>

当我点击&#34;点击我&#34;没有什么打印到控制台,但是,如果我删除范围属性或将其更改为scope:true然后它按预期工作。我知道这与隔离范围有关,但我不完全了解发生了什么。我希望有一个隔离范围,因为这将是一个模块化指令,我将在许多不同的项目中使用。

注意:我使用的是角1.4.6

更新 这个函数需要做DOM操作。这就是它在链接功能中的原因。

2 个答案:

答案 0 :(得分:1)

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

由于元素存在于指令之前,因此不会使用link中的信息编译这些元素。要获得您想要的内容,您需要将这些元素放在templatetemplateUrl中,以便可以针对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>

答案 1 :(得分:0)

将您的函数放在指令的控制器中。 如果您声明$scope

,则不需要使用controllerAs

JS:

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

    return {
      restrict:'E',
       scope: {},
       template:'<div><a href="" ng-click="MyCtrl.myFunction()">Click Me</a></div>',
       controllerAs:'MyCtrl',
       controller: function(){
        this.myFunction = function(){
          alert('okok');
        }
      },
       link: function(scope, element, attrs){

       }

    }


});

HTML:

<body>
  <my-directive> </my-directive>
</body>