我可以从控制器调用的角度指令内的函数

时间:2013-08-23 09:48:31

标签: angularjs

是否可以在可以从控制器调用的指令中创建函数。看起来应该是这样的:

HTML:

<div myDir id='myDir'>My dir</div>
<button ng-click="clickme()">click me</button>

JS:

app.directive("myDir", function(){
  return function(){
    var dirFunction = function(){
        alert("hello world");
    }
  }
}

app.controller("Control", function($scope){
   $scope.clickme = function(){
     angular.element('#myDir').dirFunction();
   }
}

2 个答案:

答案 0 :(得分:2)

首先在您的HTML更改myDirmy-dir。在你的情况下,你不需要给你的div id

<div my-dir>My dir</div>
<button ng-click="clickme()">click me</button>

现在将dirFunction公开给范围。这将使您的控制器可以访问此功能:

app.directive("myDir", function(){
    return function(scope){    
        scope.dirFunction = function(){
            alert("hello world");
        }
    }
});

在控制器中,只需将其称为$scope.dirFunction()

app.controller("Control", function($scope){
    $scope.clickme = function(){
        $scope.dirFunction();
    }
});

注意:你不应该在你的控制器中进行DOM操作:控制器中的angular.element('#myDir').dirFunction();是一种在angularjs中编码的坏方法。保存此指令。

答案 1 :(得分:0)

只是想用一个解决方案来更新它:这里是Plunk - http://plnkr.co/edit/m2YKLGGLv88jNkkgAYPp?p=preview

基本上我使用Array中的范围变量从上面的CodeZilla扩展了解决方案。

$scope.func = [];

然后,在指令属性functionname。

中传递要调用的函数的名称
<div mydir name="dir1" functionname="sayhello1">Directive dir1</div>

然后将从指令调用的函数添加到控制器:

$scope.callDir1 = function (){
    $scope.func['sayhello1']();
}

$scope.callDir2 = function (){
    $scope.func['sayhello2']();
}

在指令本身中,我们使用compile在指令中创建将从控制器调用的函数。

app.directive('mydir', function () {
    return {
    scope: true,
    compile: function (tElement, tAttrs, transclude) {
        return function postLink(scope, iElement, iAttrs, controller) {
            scope.$parent.func[iAttrs.functionname] = function (){
                alert("update something in " + iAttrs.name);
            }

        }
    }
}
});

或者,您可以使用链接功能 - 它的工作原理相同:

app.directive('mydir', function () {
    return {
        scope: true,
        link: function (scope, element, attrs) {
            scope.$parent.func[attrs.functionname] = function () {
                console.debug("update something in " + attrs.name);
            }
        }
    }
});

那就是它。