Question

我是Angular JS的新手。

我有几个问题。范围似乎与我的第一个控制器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（＆＃34; thespicy＆＃34;，[]） .controller（＆＃34; controlspicy＆＃34;，[＆＃34; $ scope＆＃34;，function（$ scope）{

  $scope.greeting = "hello";

}]);

Answer 1

如前所述，Preston需要将<h2>包含在ng-controller的标记内。还有一个问题。 controlspicy 在另一个模块中定义，而不是在ng-app中指定的模块。将spicy.js中的angular.module("thespicy", [])更改为angular.module("newtest")。

您几乎不应该在一个应用中使用多个模块。然而，你可以将它分成不同的子模块，但如果你的Angular新手我会建议只使用一个模块开始。

澄清;您只应通过键入angular.module("module_name", [])来定义一次模块。请注意[]。在这个数组中，您将为模块添加依赖项（如果您真的想要＆＃39; thespicy＆＃39;模块，您可以将其作为依赖项添加到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。

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

以下是您的示例中的一名工作人员：http://plnkr.co/edit/gufbBI4i68MGu8FWVfJv?p=preview

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

script.js应该这样开始：

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

Answer 3

您有多个应用

检查此std::remove_cv是否有工作的嵌套控制器

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

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

3 个答案: