Question

我希望通过元素上的属性指定指令应该使用的控制器 - 即动态：

HTML

<div data-mydirective data-ctrl="DynController"></div>

角

angular.module('app', [])
    .controller('MainController', [function() { ... }])

    .controller('DynController', [function() { ... }])

    .directive('mydirective', [function() {
        return {
            controller: 'DynController', // <- make this dynamic

            ...
        }
    }]);

Answer 1

您可以执行以下操作：

.directive('mydirective', [function() {
    return {        
        controller: function($scope, $element, $attrs){
              //Make decision based on attributes or $scope members
              if($scope.$attrs.caseA == 'true'){
                   return new ControllerA($scope, $element, $attrs);
               } else {
                   return new ControllerDefault($scope, $element, $attrs);
               }
         },
        ...
    }
}]);

再往前走一步，你可以使用$controller

.directive('mydirective', ['$controller',function($controller) {
        return {   
            controller: function($scope, $element, $attrs){
                  return $controller($attrs.dynamicCtrlName, {$scope: $scope,$element:$element,$attrs:$attrs});
             },
             ...
        }
}

在这两种情况下，请确保您提供控制器期望的所有特定可注射依赖项（特别是$ scope，$ attrs，transclude函数等...）。关于控制器注入的更多细节$compile在控制器部分下 - 理想情况下，外部控制器功能应该接收它们全部作为本地传递。

Answer 2

关于此的文档中没有任何内容，但您可以执行以下操作。根据我的理解，这些内容在引擎盖下用于使ng-controller工作。

.directive('mydirective', [function() {
    return {
        controller: '@',
        name: 'ctrl', // <- attribute that specifies the controller to use

        ...
    }
}]);

Answer 3

我认为更好的方法就是使用范围，因为范围已经绑定到控制器，即将您想要调用的内容放在控制器范围内，并在指令链接中简单处理它

动态指定要在Angular指令中使用的控制器

3 个答案: