嵌套的角度控制器和视图管理

Question

我想最好用图片来描述它。 我有一个角度应用程序，这是一个简单的视图。

明显的解释：列表显示所有实体，如果单击一个实体，则可以默认情况下隐藏的形式对其进行编辑，并且类似的操作适用于添加新实体。

问题

我知道这是一个基本示例，因此这里的解决方案可能有点过分，但是我想将“添加新实体”，“编辑实体”和“实体列表”的逻辑分开。 我以为我可以这样实现：

<div ng-include="'userAddForm.html'"
     ng-show="???"
     ng-controller="AddUser as add">
</div>
<div ng-include="'userEditForm.html'"
     ng-show="???"
     ng-controller="AddEdit as edit">
</div>

<div class="panel panel-default">
   ... list managed by the current controller
</div>

我想念的

我很难共享隐藏部分的状态。 例如一些布尔标志。 例如：

1. 单击实体显示编辑表单
2. 在编辑表单中保存/取消隐藏零件

然后，我认为第一步是列表控制器的责任，但是保存/取消部分交给编辑控制器。 与两者中包含的服务共享价值是可能的-但这似乎也不合理。

我认为有一些我看不到的简单解决方案，我愿意接受任何建议。 谢谢！

Answer 1

如果您的目标是一个简单的解决方案，只需在模型中切换一个布尔值，则可以使用以下子控制器：

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

子控制器将继承父控制器的范围，并可以直接编辑值。 我的编辑子控制器过滤了editMode == true，因此当父控制器更改该值时，子控制器会自动显示该项目。 所有更改都将实时更新，并且子控制器只需切换editMode属性即可将其从编辑区域中删除。

类似的逻辑用于添加子控制器。

视图如下所示：

index.html

<div ng-controller="myCtrl">

  <div ng-controller="addCtrl" ng-include="'userAddForm.html'">
  </div>
  <div ng-controller="editCtrl" ng-include="'userEditForm.html'">
  </div>
    <h1>Listing</h1>
    <ul>
        <li ng-repeat="item in items |  filter:{addMode:false}">
            {{item.id}}   
            {{item.name}}  

            <button ng-click="startEditing(item)">[ edit ]</button>
        </li>
    </ul>
    <button ng-click="startAdding()">[ add ]</button>
  <div>Debug:<br>{{items}}</div>
</div>

userAddForm.html

<ul>
    <li ng-repeat="item in items | filter:{addMode:true}">
        <input type="text" ng-model="item.id">
        <input type="text" ng-model="item.name">
          <button ng-click="add(item)">[ add ]</button>
          <button ng-click="cancel(item)">[ cancel ]</button>
    </li>
</ul>

userEditForm.html

<ul>
    <li ng-repeat="item in items | filter:{editMode:true}">
      <input type="text" ng-model="item.id">
      <input type="text" ng-model="item.name">
        <button ng-click="save(item)">[ save ]</button>
    </li>
</ul>

控制器看起来像这样：

angular.module('myApp.controllers',[])
  .controller('addCtrl', function($scope) {
    $scope.add = function(item) {
      item.addMode = false;
    }
    $scope.cancel = function(item) {
      $scope.items.pop(item);
    }
  })
  .controller('editCtrl', function($scope) {
    $scope.save = function(item) {
      item.editMode = false;
    }
  })
  .controller('myCtrl', function($scope) {

        $scope.items = [
            {name:'aap', id:"1", editMode:false, addMode:false},    
            {name:'noot', id:"2", editMode:false, addMode:false},    
            {name:'mies', id:"3", editMode:false, addMode:false},    
            {name:'zus', id:"4", editMode:false, addMode:false}
        ];


        $scope.startAdding = function(){
          $scope.items.push({addMode:true});
        };

        $scope.startEditing = function(item){
          item.editMode = true;
        };

  });

Answer 2

您可以使用Angular状态路由来实现此目的。在其中您将创建状态（不同的视图），例如-

标头addEntity editEntity listEntity

参考https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

Answer 3

共享状态可以通过创建一个服务来实现，然后将服务注入所有感兴趣的部分（控制器），该服务可以保存控制器可以绑定到的数据并显示在模板中。 Angular JS中的服务是单例，因此所有控制器都在访问和更改共享状态。