一尘不染

动态NG控制器名称

angularjs

我想基于我们加载的配置动态指定一个控制器。像这样:

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

我该怎么做呢?我以为这很容易,但是我似乎可以找到一种方法。


阅读 222

收藏
2020-07-04

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

可能有一种插值的值($interpolatedynamic-ctrl而不是解析它($parse)的方法,但是由于某种原因,我无法使其工作。

2020-07-04