动态NG控制器名称

Question

我想基于我们加载的配置动态指定控制器.像这样的东西:

<div ng-controller="{{config.controllerNameString}}>
    ...
</div>

我怎么做角度的？我认为这很容易,但我似乎找到了这样做的方法.

Answer 1

你要做的是在调用其他任何东西之前运行另一个指令,从某个模型中获取控制器名称,删除新指令并添加ng-controller指令,然后重新编译该元素.

看起来像这样:

global.directive('dynamicCtrl', ['$compile', '$parse',function($compile, $parse) {
  return {
    restrict: 'A',
    terminal: true,
    priority: 100000,
    link: function(scope, elem) {
      var name = $parse(elem.attr('dynamic-ctrl'))(scope);
      elem.removeAttr('dynamic-ctrl');
      elem.attr('ng-controller', name);
      $compile(elem)(scope);
    }
  };
}]);

然后你可以在模板中使用它,如下所示:

<div dynamic-ctrl="'blankCtrl'">{{tyler}}</div>

用这样的控制器:

global.controller('blankCtrl',['$scope',function(tyler){
    tyler.tyler = 'tyler';
    tyler.tyler = 'chameleon';
}]);

可能有一种内插value($interpolate)dynamic-ctrl而不是解析it($parse)的方法,但由于某种原因我无法使它工作.

Answer 2

我在ng-repeat中使用它,所以这是循环和子对象的改进代码:

模板:

<div class="col-xs6 col-sm-5 col-md-4 col-lg-3" ng-repeat="box in boxes">
<div ng-include src="'/assets/js/view/box_campaign.html'" ng-dynamic-controller="box.type"></div>
</div>

指示:

mainApp.directive('ngDynamicController', ['$compile', '$parse',function($compile, $parse) {
  return {
      scope: {
          name: '=ngDynamicController'
      },
      restrict: 'A',
      terminal: true,
      priority: 100000,
      link: function(scope, elem, attrs) {
          elem.attr('ng-controller', scope.name);
          elem.removeAttr('ng-dynamic-controller');

          $compile(elem)(scope);
      }
  };
}]);