Question

我正在读一本关于AngularJS的书，而且有些东西让我感到困惑

有两个控制器

EditCtrl

app.controller('EditCtrl', ['$scope', '$location', 'recipe', 
function($scope, $location, recipe){
    $scope.recipe = recipe;

    $scope.save = function(){
        $scope.recipe.$save(function(recipe){
            $location.path('/view/', + recipe.id);
        });
    };

    $scope.remove = function(){
        delete $scope.recipe;
        $location.path("/");
    };
}]);

IngredientsCtrl

app.controller('IngredientsCtrl', ['$scope',
function($scope){
    $scope.addIngredients = function(){
        var ingredients = $scope.recipe.ingredients;
        ingredients[ingredients.length] = {};
    };

    $scope.removeIngredient = function(index) {
        $scope.recipe.ingredients.slice(index, 1);
    };
}]);

我不明白IngredientsCtrl是EditCtrl的孩子的方式。我看不出这种关系。本书清楚地说明了这种情况，我确信情况就是如此，因为示例应用程序工作正常，但我需要帮助理解使IngredientsCtrl成为EditCtrl的孩子的原因。对我来说没有意义。

编辑：使用相关的HTML

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

编辑：书籍摘录

到目前为止我们看到的所有其他控制器都链接到UI上的特定视图。但成分控制器很特别。它是编辑页面上使用的子控制器封装更高级别不需要的某些功能。有趣的是要注意，因为它是一个子控制器，它从父级继承范围控制器（在这种情况下为编辑/新控制器）。因此，它可以访问来自父母的$ scope.recipe。

编辑：路由

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: '/'});
}]);

Answer 1

如果将ng-controller指令放在两个嵌套的html元素上，则两个控制器共享父子关系。

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

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

Answer 2

没有像儿童控制器那样有角度的东西。但是，您可以将控制器放在dom中的另一个控制器内。

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

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

示例中的两个控制器都从范围中读取。这是MiškoHevery自己（http://www.youtube.com/watch?v=ZhfUv0spHCY）所说的不好的做法。

复述：

在控制器内部，您只应对范围和模板进行写操作，您应该只读

基于这些代码段。我不推荐你为学习angularjs而阅读的那本书。

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

2 个答案: