Question

我正在努力改进W3Cschools＆＃34;得到一些输出＆＃34;按照community driven style guide on Github

编码AngularJS控制器的语法

据我所知，我想

避免使用$ scope服务将函数和属性定义为部分控制器。

注入 $ scope 。

我发现，当第一个控制器按计划返回其属性时，应用程序中的第二个控制器只是已损坏：即使using $scope实现返回AngularJS标记，如Angular已切换关闭。

我制作了一个简单的模型，在视图中保留controller as语法并调整using $scope实现以定义要分配给 $ scope 的对象变量，以便表达式的语法不必在视图中更改。

正如最初发布的那样，两个控制器的injection of $scope实现被注释掉 - 两个控制器都有效。

如果您注释掉第一个控制器的using $scope实现[并取消注释其injection of $scope版本]所需的文字： -

控制器Example1Ctrl的字符串属性[Example1CtrlOutput] [返回而不是使用$ scope]

第一个控制器显示

，但第二个控制器只显示未修改的AngularJS表达式标记： -

{{e2.Example2CtrlOutput}}

有人可以说出了什么问题吗？

＆＃13;

		var app = angular.module( "myApp", [] ) ;

		// --- implementation using $scope to define property of controller "Example1Ctrl"
	
	    app.controller("Example1Ctrl", [ '$scope' ,

	    function($scope) {

	    	var obj = { Example1CtrlOutput : "String property of object inside controller Example1Ctrl" } ;
	      	$scope.e1 = obj ;

	  	}]);

	  	// ---------------------------------------------------------------------------------


	  	// --- implementation  of controller "Example1Ctrl" injecting $scope ---------------
/*	
	  	app.controller("Example1Ctrl", Example1Ctrl ) ;

	    Example1Ctrl.$inject[ '$scope' ] ;

	    function Example1Ctrl($scope) {

	        var e1 = this ; // avoids overuse of "this" 

	        e1.Example1CtrlOutput = "String property [Example1CtrlOutput] of controller Example1Ctrl [returned instead of using $scope]" ;

	    }

*/	  	// ---------------------------------------------------------------------------------
	  	

		// --- implementation using $scope to define property of controller "Example2Ctrl"

	    app.controller("Example2Ctrl", [ '$scope' ,

	    function($scope) {

	    	var obj = { Example2CtrlOutput : "String property of object inside controller Example2Ctrl" } ;
	      	$scope.e2 = obj ;

	  	}]);
	
	  	// ---------------------------------------------------------------------------------

/*
	  	// --- implementation  of controller "Example2Ctrl" injecting $scope ---------------

	  	app.controller("Example2Ctrl", Example2Ctrl ) ;

	    Example2Ctrl.$inject[ '$scope' ] ;

	    function Example2Ctrl($scope) {

	        var e2 = this ; // avoids overuse of "this" 

	        e2.Example2CtrlOutput = "String property [Example2CtrlOutput] of controller Example2Ctrl [returned instead of using $scope]" ;

	    }

	  	// ---------------------------------------------------------------------------------

*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp">	
		<div ng-controller="Example1Ctrl as e1">
			{{e1.Example1CtrlOutput}}
		</div>
		<div ng-controller="Example2Ctrl as e2">
			{{e2.Example2CtrlOutput}}
		</div>
	</div>

＆＃13;

Answer 1

我找到了解决问题的方法。您必须为Example1Ctrl的app.controller下面的Example2Ctrl移动app.controller。

这样你的代码就像

app.controller("Example1Ctrl", Example1Ctrl ); app.controller("Example2Ctrl", Example2Ctrl );

修改

所以实际问题是$inject部分。 $inject永远不会作为控制器上的属性存在。您应该将$inject设置为服务，指令等数组

I.E Example1Ctrl.$inject = ['$scope']。

移动app.controller修复输出的原因是因为angular能够在遇到错误之前注册控制器。

您还需要在注册控制器之前移动Example1Ctrl.$inject和Example2Ctrl.$inject，否则将$scope未定义并导致错误。

来源：https://docs.angularjs.org/api/auto/service/ $ injector。

AngularJS 1在一个控制器中注入$ scope内联中断第二个控制器

1 个答案: