javascript - 动态指定要在 Angular 指令中使用的 Controller

Question

我希望通过元素上的属性指定指令应使用的 Controller - 即动态:

HTML

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

Angular

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});
             },
             ...
        }
}

在这两种情况下，请确保提供 Controller 期望的所有特定可注入(inject)依赖项(特别是 $scope、$attrs、transclude 函数等...)。有关 Controller 注入(inject)的更多详细信息，请参见此处 $compile在 Controller 部分下 - 理想情况下，外部 Controller 功能应该接收它们作为本地传递的所有内容。