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

发布时间：2020-12-17 06:57:42 所属栏目：安全来源：网络整理

导读：我正在寻找一种方法来了解如何从控制器调用函数内部指令.我得到了剪辑,但因此我是角度新的,这就是为什么下面的代码流不是很清楚.任何人都想解释代码是如何工作的.谢谢 map set-fn="setDirectiveFn(theDirFn)"/mapbutton ng-click="directiveFn()"call direct

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

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

解决方法

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

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

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

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!