[英]From an AngularJS controller, how do I resolve another controller function defined in the module (dynamic ng-controller)?
自解释小提琴: http : //jsfiddle.net/5FG2n/6/
我需要根据其名称作为字符串动态选择要在运行时使用的控制器。 该字符串将从配置对象中读取。
在下面的代码中,我目前将InnerCtrlAsLocalVariable
分配给$scope.dynamicCtrl
。 我如何将InnerCtrlFromModule
分配给属性呢?
视图:
<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';
}
]);
您可以尝试编写自定义指令:
.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);
}
}
})
如果您需要更多信息,我们必须添加terminal: true
和priority: 1000
。 看看我对这个问题的回答: 在AngularJS中添加指令
您可以尝试将其作为值注入:
angular.module('app', [])
.value('InnerCtrl',InnerCtrlAsLocalVariable)
.controller('OuterCtrl', ['$scope','InnerCtrl',
function($scope, InnerCtrl) { //inject the value into the function
$scope.dynamicCtrl = InnerCtrl;
}
])
或者使用$ injector来动态解析:
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)
您可以使用$controller
服务动态创建控制器实例,从该实例我们可以使用constructor
属性检索构造函数
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';
}])
您无需动态选择控制器。 使用单个控制器并使用DI为该控制器提供不同的功能。
angular.module('app', [])
.service('ControllerService', function() {
this.get = function(controllerName) {
// ... do your logic for returning the controller functionality here
if (controllerName == "fooController") {
return {
foo: function() { return "foo" }
}
}
else {
return {
foo: function() { return "bar" }
}
}
});
})
.controller('SingleController', ['$scope', 'ControllerService',
function($scope, ControllerService) {
$scope.functionality = ControllerService.get('fooController');
});
绑定到控制器上的functionality
对象:
<div ng-controller="SingleController">
<p>{{functionality.foo()}}</p>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.