动态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';
}]);

可能有一种插值的值（$interpolate）dynamic-ctrl而不是解析它（$parse）的方法，但是由于某种原因，我无法使其工作。