绑定不适用于嵌套控制器

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

为什么不让我打印出$scope.greeting？不应该因为我分配了控制器而进行绑定。

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

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

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

    <head> 
    <script data-require="[email protected]*" 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

变种申请= angular.module（ “thespicy”，[]） .controller（ “controlspicy” ，[“$ scope”，function（$ scope）{

$scope.greeting = "hello"; 

}]);

来源

2015-07-12 magna_nz

其他的答案似乎得到，为什么您的具体问题不能正常工作的心脏，但使用上'$ scope'由于JavaScript的原型继承原语在使用嵌套的控制器时，您可能会遇到其他问题。见http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs，并总是试图遵循“点规则” – Claies

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

您应该几乎从不在一个应用程序中使用多个模块。但是，您可以将其分为不同的子模块，但是如果您对Angular I的新增功能建议仅使用一个模块开始。

澄清;您只应通过键入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。

来源

2015-07-12 01:55:36 Scraph

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

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

    <head> 
    <script data-require="[email protected]*" 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'])

来源

2015-07-12 01:48:05

您有多个应用程序

检查这个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"; 
    }])

来源

2015-07-12 01:54:32 user2954587

绑定不适用于嵌套控制器

回答

相关问题