AngularJS如何从控制器调用指令函数

Question

我正在寻找一种方法来了解如何从控制器调用函数内部指令.我得到了剪辑,但因此我是角度新的,这就是为什么下面的代码流不是很清楚.任何人都想解释代码是如何工作的.谢谢

<map set-fn="setDirectiveFn(theDirFn)"></map>
<button ng-click="directiveFn()">call directive function</button>

scope: { setFn: '&' },
link: function(scope, element, attrs) {
    scope.updateMap = function() {
       alert('inside updateMap()');
    }
    scope.setFn({theDirFn: scope.updateMap});
}

function MyCtrl($scope) {
    $scope.setDirectiveFn = function(directiveFn) {
        $scope.directiveFn = directiveFn;
    };
}

Answer 1

从控制器开始,此块在控制器中setDirectiveFn()的$scope对象上创建一个方法,该方法接受一个参数(directiveFn),然后使用该参数在控制器中directiveFn()的$scope对象上创建方法.

    $scope.setDirectiveFn = function(directiveFn) {
        $scope.directiveFn = directiveFn;
    };

在指令中,它在指令中updateMap()的scope对象上创建一个方法,然后调用通过这一行setFn()映射到$scope.setDirectiveFn()方法的方法:<map set-fn="setDirectiveFn(theDirFn)"></map>在你的HTML和这一行中:scope: { setFn: '&' }在你的指令中.它传递的scope.updateMap()方法有效地设置$scope.directiveFn()在你的控制器中等于scope.updateMap()你的指令.

link: function(scope, element, attrs) {
    scope.updateMap = function() {
       alert('inside updateMap()');
    }
    scope.setFn({theDirFn: scope.updateMap});
}

然后按钮$scope.directiveFn()在控制器中调用,该按钮已scope.updateMap()在您的指令中映射到.

<button ng-click="directiveFn()">call directive function</button>

Answer 2

你可以用角度pubsub做到这一点

link: function(scope, element, attrs) {
    scope.updateMap = function() {
       alert('inside updateMap()');
    }
    scope.setFn({theDirFn: scope.updateMap});

    scope.$on('eventName', function(event, data){
       //call directive function here
    })
}

function MyCtrl($scope) {

      $scope.$broadcast('eventName', data)
}