angularjs – 使用ng-controller注入所需的依赖项
发布时间:2020-12-17 07:52:39 所属栏目:安全 来源:网络整理
导读:使用ui.router,我们有一个状态控制器: controller('widget',function($repository,$stateParams){ $scope.widget = $repository.get($stateParams.id);}) 注册时间: .state('widget',controller: 'widget',template: '/widgetTemplate.html' 我们遇到了一
使用ui.router,我们有一个状态控制器:
controller('widget',function($repository,$stateParams){ $scope.widget = $repository.get($stateParams.id); }) 注册时间: .state('widget',controller: 'widget',template: '/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) { 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); } }; }); 用法如您所述: <div ng-controller="MainCtrl"> {{name}} <div ng-controller="SecondCtrl" ng-inject="{foo: name,bar: 'bar'}"> </div> </div> 当然,控制器可以注入以下变量: .controller("SecondCtrl",function($scope,foo,bar){ }); plunker (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |