Javascript 是什么使这两个控制器相关？

我在读一本关于AngularJS的书，有些东西让我困惑

有两个控制器

编辑控制

IngreditSCTRL

我不明白的是，

IngredientsCtrl

是

EditCtrl

的子项。我看不出这种关系。这本书清楚地说明了这种情况，我确信这是因为示例应用程序运行良好，但我需要帮助理解是什么使

IngredientsCtrl

成为

EditCtrl

的孩子。对我来说没有意义

编辑：使用相关HTML

---

如果将

ng controller

指令放置在两个嵌套html元素上，则两个控制器共享父子关系

如果查看HTML模板，您应该会看到如下内容：

<!-- parent controller -->
<div ng-controller="EditCtrl">
    <!-- child controller -->
    <div ng-controller="IngredientsCtrl"></div>
</div>

---

在angular中没有子控制器这样的东西。但是，您可以将一个控制器放置在dom中另一个控制器的内部

<div ng-controller="EditCtrl">
    <div ng-controller="IngredientsCtrl">
        // Here you have access to the scope of both controllers
    </div>
</div>

//在这里，您可以访问两个控制器的作用域

您的问题“这两个控制器之间的关联是什么？”的答案是“没有”。它们可以像我描述的那样嵌套，但任何两个控制器也可以嵌套

示例中的两个控制器都从作用域读取。正如米什科·赫弗利本人所说的那样，这是一种糟糕的做法（）

释义：

在控制器内部，您应该只对作用域执行写操作，在模板中，您应该执行只读操作

---

基于这些代码片段。我不推荐您阅读学习angularjs的书。

我从阅读中了解到了这一点，但在这个应用程序中，没有嵌套。

IngredientsCtrl

单独存在，您可以共享类似于

components

模板的HTML吗。检查父模板中是否有

ng include

。我的意思是，在父模板中，你应该有：

任何地方都没有“ng include”。必须有一个元素放置在
ng controller=“EditCtrl”
上。据说这本书是由从事原始角度开发的人写的。我理解你所说的没有子控制器，但是
IngreditSCTRL
继承了
EditCtrl
的一些属性，这就是作者称为
的“作为子控制器创建”的原因“
。不，它不会继承任何属性。当您按照我描述的方式将其放置在dom中时，您可以从两个控制器访问变量。但是javascript代码基本上是不相关的，这是有意义的@CodeHater让我注意到控制器是通过ng视图放置在DOM中的。现在有道理了。
<div class="control-group">
<label class="control-label" for="ingredients">Ingredients:</label>
<div class="controls">
  <ul id="ingredients" class="unstyled" ng-controller="IngredientsCtrl">
    <li ng-repeat="ingredient in recipe.ingredients">
      <input ng-model="ingredient.amount" class="input-mini">
      <input ng-model="ingredient.amountUnits" class="input-small">
      <input ng-model="ingredient.ingredientName">
      <button type="button" class="btn btn-mini" ng-click="removeIngredient($index)"><i class="icon-minus-sign"></i> Delete </button>
    </li>
    <button type="button" class="btn btn-mini" ng-click="addIngredient()"><i class="icon-plus-sign"></i> Add </button>
  </ul>
</div>

var app = angular.module('guthub', 
      ['guthub.directives', 'guthub.services']);

app.config(['$routeProvider', 
    function($routeProvider){
        $routeProvider.
         when('/', {
             controller: 'ListCtrl', 
             resolve: {
                 recipes: function(MultipleRecipeLoader){
                     return MultipleRecipeLoader();
                 }
             },
             templateUrl: '/view/list.html'
         }).
         when('/edit/:recipeId', {
             controller: 'EditCtrl',
             resolve: {
                 recipe: function(RecipeLoader) {
                     return RecipeLoader();
                 }
             },
             templateUrl: '/view/recipeForm.html'
         }).
         when('/view/:recipeId', {
             controller: 'ViewCtrl',
             resolve: {
                 recipe: function(RecipeLoader) {
                     return RecipeLoader();
                 }
             },
             templateUrl: '/view/viewRecipe.html'
         }).
         when('/new', {
             controller: 'NewCtrl',
             templateUrl: '/view/recipeForm.html'
         }).
         otherwise({redirectTo: '/'});
}]);

<!-- parent controller -->
<div ng-controller="EditCtrl">
    <!-- child controller -->
    <div ng-controller="IngredientsCtrl"></div>
</div>

<div ng-controller="EditCtrl">
    <div ng-controller="IngredientsCtrl">
        // Here you have access to the scope of both controllers
    </div>
</div>