0

我正在读一本关于 AngularJS 的书，有些事情让我感到困惑

有两个控制器

编辑Ctrl

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

成分Ctrl

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 上的特定视图。但是成分控制器很特别。它是一个子控制器，用于在编辑页面上封装某些更高级别不需要的功能。值得注意的是，由于它是一个子控制器，它从父控制器（在本例中为 Edit/New 控制器）继承了作用域。因此，它可以从父级访问 $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: '/'});
}]);
4

2 回答 2

1

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

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

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

您示例中的两个控制器都从范围读取。正如 Miško Hevery 本人 ( http://www.youtube.com/watch?v=ZhfUv0spHCY ) 所说，这是一种不好的做法。

释义：

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

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

于 2013-10-30T09:09:44.680 回答
1

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

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

<!-- parent controller -->
<div ng-controller="EditCtrl">
    <!-- child controller -->
    <div ng-controller="IngredientsCtrl"></div>
</div>
于 2013-10-30T09:07:35.647 回答