![](/img/trans.png)
[英]Angularjs controller name in application config vs ng-controller
[英]Dynamic NG-Controller Name
我想基於我們加載的配置動態指定控制器。 像這樣的東西:
<div ng-controller="{{config.controllerNameString}}>
...
</div>
我怎么做角度的? 我認為這很容易,但我似乎找到了這樣做的方法。
你要做的是在調用其他任何東西之前運行另一個指令,從某個模型中獲取控制器名稱,刪除新指令並添加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';
}]);
可能有一種方法可以插入dynamic-ctrl
的值( $interpolate
)而不是解析它( $parse
),但是由於某些原因我無法使它工作。
我在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);
}
};
}]);
就個人而言,這里的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
}));
}
});
}
};
}]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.