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

Question

我正在尝试改进 W3Cschools "get something output" 编码 AngularJS 控制器的语法，方法是遵循 community driven style guide on Github

按照建议，我想

Avoid use of $scope service to define functions and properties as part of controllers.

通过注入 $scope.

我发现，虽然第一个控制器 returns 其属性按计划进行，但应用程序中的第二个控制器只是损坏：甚至 using $scope 实现 returns AngularJS 标记如 Angular 已关闭。

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

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

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

String property [Example1CtrlOutput] of controller Example1Ctrl [returned instead of using $scope]

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

{{e2.Example2CtrlOutput}}

有人能说说哪里出了问题吗？

  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]" ;

     }

    // ---------------------------------------------------------------------------------

*/

<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>

Answer 1

我已经找到解决您问题的方法。您必须将 Example2Ctrl 的 app.controller 移动到 Example1Ctrl 的 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 会破坏第二个控制器

AngularJS 1 injecting $scope inline in one controller breaks second controller

angularjs

angularjs-scope

angularjs-controlleras