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>

我想念的是

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

点击实体显示编辑表单
编辑表单中的保存/取消隐藏了部分

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

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

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中的服务是单例，因此所有控制器都在访问和改变共享状态。

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

3 个答案:

视图如下所示：

控制器看起来像这样：