在嵌套控制器中绑定不工作

binding not working in nested controller

本文关键字：工作 绑定 嵌套 控制器      更新时间：2023-09-26

我是Angular JS新手。

我有几个问题。范围似乎与我的第一个控制器testController一起工作，但不与我的第二个控制器controlspicy一起工作。

为什么不让我打印出$scope.greeting ?难道绑定不能工作吗，因为我分配了一个控制器。

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

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

预览
<!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。模块("thespicy",[]).controller("controlspicy"， ["$scope"， function($scope){

  $scope.greeting = "hello";
}]);

正如Preston之前提到的，您需要将<h2>包装在带有ng-controller的标记中。然而，还有一个问题。controlspicy在ng-app中指定的模块之外的另一个模块中定义。将spice .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.

嵌套控制器只控制标签范围内的内容。在本例中，它只能访问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>

这是你的例子的一个工作柱塞:http://plnkr.co/edit/gufbBI4i68MGu8FWVfJv?p=preview

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

script.js应该这样开始:

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

你有多个应用

检查此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";
    }])
相关文章：