使用 ng-controller 注入所需的依赖项 [英] Injecting required dependencies with ng-controller
问题描述
使用 ui.router,我们有一个状态控制器:
controller('widget', function($repository, $stateParams){$scope.widget = $repository.get($stateParams.id);})
注册:
.state('widget',控制器:'小部件',模板:'/widgetTemplate.html'
我们遇到了一个案例,我们希望将此控制器作为模板的一部分重用:
<div ng-controller="widget" ng-include="/widgetTemplate.html"></div>
但似乎没有一种简单的方法可以使用正确的 ID 注入模拟的 $stateParams 对象.类似的东西:
<div ng-controller="widget" ng-inject="{$stateParams: {id: 1234}}" ng-include="/widgetTemplate.html"></div>
除了编写自定义指令来增强 ng-controller 或重构我们的代码以利用继承的作用域之外,是否有任何开箱即用的方法来做到这一点?
我不相信有开箱即用的方法.ng-controller
只是使用普通的控制器实例化,没有机会注入任何东西.
但这是一个有趣的功能",实际上,可以使用自定义指令相对简单地构建它.
这是一个说明性示例(免责声明:它绝对没有在晦涩的场景下进行测试):
.directive("ngInject", function($parse, $interpolate, $controller, $compile) {返回 {终端:真的,转置:真实,优先级:510,链接:函数(范围,元素,属性,ctrls,transclude){如果(!attrs.ngController){element.removeAttr("ng-inject");$compile(element)(scope);返回;}var controllerName = attrs.ngController;var newScope = scope.$new(false);var locals = $parse(attrs.ngInject)(scope);locals.$scope = newScope;var controller = $controller(controllerName, locals);element.data("ngControllerController", 控制器);element.removeAttr("ng-inject").removeAttr("ng-controller");$compile(element)(newScope);嵌入(新范围,功能(克隆){element.append(克隆);});//恢复隐藏轨道element.attr("ng-controller", controllerName);}};});
用法如您所描述:
{{姓名}}<div ng-controller="SecondCtrl" ng-inject="{foo: name, bar: 'bar'}">
当然,控制器可以注入这些变量:
.controller("SecondCtrl", function($scope, foo, bar){});
Using ui.router, we have a controller for a state:
controller('widget', function($repository, $stateParams){
$scope.widget = $repository.get($stateParams.id);
})
registered with:
.state('widget',
controller: 'widget',
template: '/widgetTemplate.html'
We've come upon a case where we like to reuse this controller as part of a template:
<div ng-controller="widget" ng-include="/widgetTemplate.html"></div>
but there doesn't appear to be an easy way to inject a mocked $stateParams object with the proper ID. Something like:
<div ng-controller="widget" ng-inject="{$stateParams: {id: 1234}}" ng-include="/widgetTemplate.html"></div>
Outside of writing a custom directive that augments ng-controller or refactoring our code to make use of inherited scopes, are there any out-of-the-box ways to do this?
I don't believe there is an out-of-the-box way. ng-controller
just uses normal controller instantiation, and there is no opportunity to inject anything.
But this is an interesting "feature", which can be built, actually, relatively simply with a custom directive.
Here's an illustrative example (disclaimer: it is definitely not tested under obscure scenarios):
.directive("ngInject", function($parse, $interpolate, $controller, $compile) {
return {
terminal: true,
transclude: true,
priority: 510,
link: function(scope, element, attrs, ctrls, transclude) {
if (!attrs.ngController) {
element.removeAttr("ng-inject");
$compile(element)(scope);
return;
}
var controllerName = attrs.ngController;
var newScope = scope.$new(false);
var locals = $parse(attrs.ngInject)(scope);
locals.$scope = newScope;
var controller = $controller(controllerName, locals);
element.data("ngControllerController", controller);
element.removeAttr("ng-inject").removeAttr("ng-controller");
$compile(element)(newScope);
transclude(newScope, function(clone){
element.append(clone);
});
// restore to hide tracks
element.attr("ng-controller", controllerName);
}
};
});
The usage is as you described it:
<div ng-controller="MainCtrl">
{{name}}
<div ng-controller="SecondCtrl" ng-inject="{foo: name, bar: 'bar'}">
</div>
</div>
And, of course, the controller can have these variables injected:
.controller("SecondCtrl", function($scope, foo, bar){
});
这篇关于使用 ng-controller 注入所需的依赖项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!