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()对象的{1}}方法。

$scope

在指令中，它在指令中的$scope.setDirectiveFn = function(directiveFn) { $scope.directiveFn = directiveFn; };对象上创建updateMap()方法，然后调用映射到scope方法的setFn()方法。行：$scope.setDirectiveFn()在您的HTML和此行中：<map set-fn="setDirectiveFn(theDirFn)"></map>在您的指令中。它正在传递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()

Answer 2

你可以使用angular 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)
}

Answer 3

我建议您阅读这篇文章：http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

基本上，您的指令由Isolate Scope

设置scope: {setFn: '&'}

这样做可以通过属性向您的指令发送数据，在本例中为set-fn属性。

在你的指令中，scope.setFn现在包含通过html（setDirectiveFn(theDirFn)）中的属性发送给它的函数

所以致电scope.setFn({theDirFn: scope.updateMap});

调用

中定义的函数

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

Answer 4

只需从控制器/模板调用指令函数，然后使用双向绑定符号在指令中初始化该函数

var app = angular.module('myApp', [])
 .controller('AppCtrl', function($scope){
 })
.directive('tabBar', function(){
return {
    restrict: 'E',
    scope: {
        tabClick: '='
    }, 
    templateUrl: 'templates/tabbar.tpl.html',
    link: function(scope) {
                    scope.tabClick = function(str) {
            alert(str);
        }
    }
   };
   });

Working sample

注意：经过测试，可以正常工作

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

4 个答案: