自解释小提琴:http://jsfiddle.net/5FG2n/6/
我需要根据名称作为字符串动态选择要在运行时使用的控制器.该字符串将从配置对象中读取.
在下面的代码中，我目前将 InnerCtrlAsLocalVariable 分配给了 $scope.dynamicCtrl.我如何将 InnerCtrlFromModule 分配给属性?
查看:
<div ng-controller='dynamicCtrl'>{{信息}}JS:
var InnerCtrlAsLocalVariable = ['$scope',功能($范围){$scope.message = '从控制器作为局部变量 - 不想要'}];angular.module('app', []).controller('OuterCtrl', ['$scope',功能($范围){//而不是这样做...$scope.dynamicCtrl = InnerCtrlAsLocalVariable;//...我想做这样的事情://$scope.dynamicCtrl = resolveCtrl('InnerCtrlFromModule');}]).controller('InnerCtrlFromModule', ['$scope',功能($范围){$scope.message = '来自模块中定义的控制器 - 想要';}]);您可以尝试编写自定义指令:
.directive("ngDynamicController",function($compile){返回 {终端:真的，优先级:1000，链接:功能(范围，元素，属性){var controllerProperty = scope[attr.ngDynamicController];element.attr('ng-controller', controllerProperty);element.removeAttr("ng-dynamic-controller");$compile(element)(scope);}}})如果您需要更多信息，为什么我们必须添加 terminal: true 和 priority: 1000.查看我对这个问题的回答:从 AngularJS 中的指令添加指令
您可以尝试将其作为值注入:
angular.module('app', []).value('InnerCtrl',InnerCtrlAsLocalVariable).controller('OuterCtrl', ['$scope','InnerCtrl',function($scope, InnerCtrl) {//将值注入到函数中$scope.dynamicCtrl = InnerCtrl;}])或者使用 $injector 动态解析:
var InnerCtrlAsLocalVariable = ['$scope',功能($范围){$scope.message = '来自模块中定义的控制器 - 想要';}]angular.module('app', []).value('InnerCtrl',InnerCtrlAsLocalVariable).controller('OuterCtrl', ['$scope','$injector',function($scope, $injector) {//注入 $injector 服务.//动态解析值$scope.dynamicCtrl = $injector.get('InnerCtrl');}]).controller('InnerCtrlFromModule', InnerCtrlAsLocalVariable)您可以使用 $controller 服务动态创建控制器实例，从该实例中我们可以使用 constructor 属性检索构造函数
angular.module('app', []).controller('OuterCtrl', ['$scope','$controller',功能(范围，$ 控制器){scope.dynamicCtrl = $controller('InnerCtrlFromModule',{$scope:scope.$new()}).constructor;}]).controller('InnerCtrlFromModule',['$scope', function($scope) {$scope.message = '来自模块中定义的控制器 - 想要';}])Self explanatory fiddle: http://jsfiddle.net/5FG2n/6/
I need to dynamically choose the controller to use at runtime based on its name as a string. The string will be read from a config object.
In the code below I currently have InnerCtrlAsLocalVariable assigned to $scope.dynamicCtrl. How instead do I assign InnerCtrlFromModule to the property?
View:
<div ng-app='app' ng-controller='OuterCtrl'>
<div ng-controller='dynamicCtrl'>
{{message}}
</div>
</div>
JS:
var InnerCtrlAsLocalVariable = ['$scope',
function($scope) {
$scope.message = 'from controller as local variable - do not want'
}
];
angular.module('app', [])
.controller('OuterCtrl', ['$scope',
function($scope) {
// Instead of doing this...
$scope.dynamicCtrl = InnerCtrlAsLocalVariable;
// ...I want to do something like this:
// $scope.dynamicCtrl = resolveCtrl('InnerCtrlFromModule');
}
])
.controller('InnerCtrlFromModule', ['$scope',
function($scope) {
$scope.message = 'from controller defined in module - want';
}
]);
You could try writing custom directive:
.directive("ngDynamicController",function($compile){
return {
terminal: true,
priority: 1000,
link:function(scope,element,attr){
var controllerProperty = scope[attr.ngDynamicController];
element.attr('ng-controller', controllerProperty);
element.removeAttr("ng-dynamic-controller");
$compile(element)(scope);
}
}
})
If you need more information why we have to add terminal: true and priority: 1000. Check out my answer to this question: Add directives from directive in AngularJS
You could try injecting it as a value:
angular.module('app', [])
.value('InnerCtrl',InnerCtrlAsLocalVariable)
.controller('OuterCtrl', ['$scope','InnerCtrl',
function($scope, InnerCtrl) { //inject the value into the function
$scope.dynamicCtrl = InnerCtrl;
}
])
Or use $injector to resolve dynamically:
var InnerCtrlAsLocalVariable = ['$scope',
function($scope) {
$scope.message = 'from controller defined in module - want';
}
]
angular.module('app', [])
.value('InnerCtrl',InnerCtrlAsLocalVariable)
.controller('OuterCtrl', ['$scope','$injector',
function($scope, $injector) { //inject the $injector service.
// resolve the value dynamically
$scope.dynamicCtrl = $injector.get('InnerCtrl');
}
])
.controller('InnerCtrlFromModule', InnerCtrlAsLocalVariable)
You can use $controller service to create the controller instance dynamically, from that instance we can retrieve the constructor function using constructor property
angular.module('app', [])
.controller('OuterCtrl', ['$scope','$controller',
function(scope, $controller) {
scope.dynamicCtrl = $controller('InnerCtrlFromModule',{$scope:scope.$new()}).constructor;
}
])
.controller('InnerCtrlFromModule',['$scope', function($scope) {
$scope.message = 'from controller defined in module - want';
}])
这篇关于从 AngularJS 控制器，我如何解析模块中定义的另一个控制器函数(动态 ng-controller)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！