栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何将一个控制器注入AngularJS中的另一个控制器

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何将一个控制器注入AngularJS中的另一个控制器

如果您打算掌握已经实例化的另一个组件的控制器,并且如果您遵循的是基于组件/指令的方法,则始终可以

require
遵循某个层次结构的另一个组件中的控制器(一个组件的实例)。

例如:

//some container component that provides a wizard and transcludes the page components displayed in a wizardmyModule.component('wizardContainer', {  ...,  controller : function WizardController() {    this.disableNext = function() {       //disable next step... some implementation to disable the next button hosted by the wizard    }  },  ...});//some child componentmyModule.component('onboardingStep', { ..., controller : function onboadingStepController(){    this.$onInit = function() {      //.... you can access this.container.disableNext() function    }    this.onChange = function(val) {      //..say some value has been changed and it is not valid i do not want wizard to enable next button so i call container's disable method i.e      if(notIsValid(val)){        this.container.disableNext();      }    } }, ..., require : {    container: '^^wizardContainer' //Require a wizard component's controller which exist in its parent hierarchy. }, ...});

现在,以上这些组件的用法可能是这样的:

<wizard-container ....><!--some stuff-->...<!-- some where there is this page that displays initial step via child component --><on-boarding-step ...> <!--- some stuff--></on-boarding-step>...<!--some stuff--></wizard-container>

您可以通过多种方式设置
require

(无前缀)-在当前元素上找到所需的控制器。如果找不到,则引发错误。

?-尝试找到所需的控制器,或者如果未找到,则将null传递给链接fn。

^-通过搜索元素及其父元素找到所需的控制器。如果找不到,则引发错误。

^^-通过搜索元素的父级找到所需的控制器。如果找不到,则引发错误。

?^-尝试通过搜索元素及其父元素来定位所需的控制器,或者如果未找到,则将null传递给链接fn。

?^^-尝试通过搜索元素的父元素来定位所需的控制器,或者如果未找到,则将null传递给链接fn。



旧答案:

您需要注入

$controller
服务以实例化另一个控制器中的一个控制器。但是请注意,这可能会导致一些设计问题。您始终可以创建遵循单一职责的可重用服务,并根据需要将其注入控制器中。

例:

app.controller('TestCtrl2', ['$scope', '$controller', function ($scope, $controller) {   var testCtrl1ViewModel = $scope.$new(); //You need to supply a scope while instantiating.   //Provide the scope, you can also do $scope.$new(true) in order to create an isolated scope.   //In this case it is the child scope of this scope.   $controller('TestCtrl1',{$scope : testCtrl1ViewModel });   testCtrl1ViewModel.myMethod(); //And call the method on the newScope.}]);

无论如何,您都无法调用,

TestCtrl1.myMethod()
因为您已将方法附加到
$scope
而不是控制器实例上。

如果您要共享控制器,那么最好这样做:

.controller('TestCtrl1', ['$log', function ($log) {    this.myMethod = function () {        $log.debug("TestCtrl1 - myMethod");    }}]);

在消费时:

.controller('TestCtrl2', ['$scope', '$controller', function ($scope, $controller) {     var testCtrl1ViewModel = $controller('TestCtrl1');     testCtrl1ViewModel.myMethod();}]);

在第一种情况下,实际上

$scope
是您的视图模型,在第二种情况下,它是控制器实例本身。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/668751.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号