javascript 动态 NG 控制器名称
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24762229/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamic NG-Controller Name
提问by RonSper
I want to dynamically specify a controller based on a config that we load. Something like this:
我想根据我们加载的配置动态指定一个控制器。像这样的东西：
<div ng-controller="{{config.controllerNameString}}>
...
</div>
How do I do this in angular? I thought this would be very easy, but I can seem to find a way of doing this.
我如何在角度上做到这一点？我认为这会很容易，但我似乎可以找到一种方法来做到这一点。
回答by Kevin Beal
What you want to do is have another directive run before anything else is called, get the controller name from some model remove the new directive and add the ng-controllerdirective, then re-compile the element.
你想要做的是在调用其他任何东西之前运行另一个指令，从某个模型中获取控制器名称，删除新指令并添加ng-controller指令，然后重新编译元素。
That looks like this:
看起来像这样：
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);
}
};
}]);
Then you could use it in your template, like so:
然后你可以在你的模板中使用它，像这样：
<div dynamic-ctrl="'blankCtrl'">{{tyler}}</div>
with a controller like this:
使用这样的控制器：
global.controller('blankCtrl',['$scope',function(tyler){
tyler.tyler = 'tyler';
tyler.tyler = 'chameleon';
}]);
There's probably a way of interpolating the value ($interpolate) of the dynamic-ctrlinstead of parsing it ($parse), but I couldn't get it to work for some reason.
可能有一种方法可以插入值 ( $interpolate)dynamic-ctrl而不是解析它 ( $parse)，但由于某种原因我无法让它工作。
回答by ido niger
I'm using it in ng-repeat, so this is improved code for loops and sub objects:
我在 ng-repeat 中使用它，所以这是循环和子对象的改进代码：
Template:
模板：
<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>
Directive:
指示：
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);
}
};
}]);
回答by Guillaume
Personally the 2 current solutions here didn't work for me, as the name of the controller would not be known when first compiling the element but later on during another digest cycle. Therefore I ended up using:
就个人而言，这里的 2 个当前解决方案对我不起作用，因为在第一次编译元素时不知道控制器的名称，但后来在另一个摘要循环中。因此我最终使用了：
myapp.directive('dynamicController', ['$controller', function($controller) {
return {
restrict: 'A',
scope: true,
link: function(scope, elem, attrs) {
attrs.$observe('dynamicController', function(name) {
if (name) {
elem.data('$Controller', $controller(name, {
$scope: scope,
$element: elem,
$attrs: attrs
}));
}
});
}
};
}]);
