绑定在嵌套控制器中不起作用答案

【问题标题】：binding not working in nested controller绑定在嵌套控制器中不起作用
【发布时间】：2015-07-12 01:38:44
【问题描述】：

我是 Angular JS 的新手。

我有几个问题。 Scope 似乎与我的第一个控制器 testController 一起使用，但不适用于我的第二个控制器 controlspicy。

为什么不让我打印出 $scope.greeting ？因为我分配了一个控制器，所以绑定不应该工作吗？

这是一个直接指向代码的 plunkr 链接。

http://plnkr.co/edit/NbED8vXNiZCqBjobrISa?p=preview

<!DOCTYPE html>
<html ng-app="newtest">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="spicy.js"></script>
  </head>

  <body ng-controller="testController">
    <h1>Hello Plunker! {{message}}</h1>
    <input type="text" name="firstName" ng-model="thetext">
    {{double(thetext)}}
    <h1 ng-controller="controlspicy">new test</h1>
    <h2>{{greeting}}</h2>

  </body>

</html>

script.js

var app = angular.module("newtest", [])
    .controller("testController", ["$scope", function($scope) {

      $scope.message = "hola";

      $scope.double = function(value){
        if (value == null){
          return 0;
        }
        return value*2;
      };

    }]);

spicy.js

var appl = angular.module("thespicy", []) .controller("controlspicy", ["$scope", function($scope){

  $scope.greeting = "hello";

}]);

【问题讨论】：

其他答案似乎触及了为什么您的特定问题不起作用的核心，但是由于 JavaScript Prototype 在$scope 上使用原语时使用嵌套控制器时，您可能会遇到其他问题遗产。请参阅stackoverflow.com/questions/14049480/…，并始终尝试遵循“点规则”

标签： javascript angularjs

【解决方案1】：

正如 Preston 之前提到的，您需要将 <h2> 包装在带有 ng-controller 的标签内。然而还有一个问题。 controlspicy 是在另一个模块中定义的，而不是您在 ng-app 中指定的模块。将Spicy.js中的angular.module("thespicy", [])更改为angular.module("newtest")。

您几乎不应该在一个应用程序中使用多个模块。但是，您可以将其划分为不同的子模块，但如果您是 Angular 新手，我建议您只使用一个模块开始。

澄清；您应该只通过键入angular.module("module_name", []) 定义一个模块一次。请注意此处的[]。在这个数组中，您将放置模块的依赖项（如果您真的想要“thespicy”模块，您可以将其作为依赖项包含在 angular.module("newtest", ['thespicy']) 中。如果您稍后想将控制器添加到模块中，您将引用该模块angular.module("module_name")（没有[]）。例如：

// Define a module
angular.module('foo', []);

// Reference the previously defined module 'foo'
angular.module('foo')
.controller('barCtrl', function() { ... });

这是您示例的工作分支：http://plnkr.co/edit/rtUJGeD52ZoatoL3JgwY?p=preview btw。

【讨论】：

【解决方案2】：

嵌套控制器只控制标签范围内。在这种情况下，它只能访问 h1 标签内的范围。试试这个：

<!DOCTYPE html>
<html ng-app="newtest">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="spicy.js"></script>
  </head>

  <body ng-controller="testController">
    <h1>Hello Plunker! {{message}}</h1>
    <input type="text" name="firstName" ng-model="thetext">
    {{double(thetext)}}
    <div ng-controller="controlspicy">
      <h1>new test</h1>
      <h2>{{greeting}}</h2>
    </div>

  </body>

</html>

这是你的例子的一个有效的 plunker：http://plnkr.co/edit/gufbBI4i68MGu8FWVfJv?p=preview

我应该指出你没有在你的主应用中包含你的控制器。

script.js 应该像这样开始：

var app = angular.module("newtest", ['thespicy'])

【讨论】：

【解决方案3】：

您有多个应用程序

检查此plunkr 以了解工作的嵌套控制器

 <div>
  <div ng-controller="testController">
  <h1>Hello Plunker! {{message}}</h1>
  <input type="text" name="firstName" ng-model="thetext">
  {{double(thetext)}}  
  </div>
  <div ng-controller="thespicy">new test
   <h2>{{greeting}}</h2>
  </div>  
</div>

script.js

var app = angular.module("newtest", [])
    .controller("testController", ["$scope", function($scope) {

      $scope.message = "hola";

      $scope.double = function(value){
        if (value == null){
          return 0;
        }
        return value*2;
      };

    }])

    .controller('thespicy', ["$scope", function($scope) {
      $scope.greeting = "Hello";
    }])

【讨论】：