綁定不適用於嵌套控制器

我有幾個問題。範圍似乎與我的第一個控制器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

綁定不適用於嵌套控制器

回答

相關問題