代码之家 › 专栏 › 技术社区 › Atais

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

angularjs javascript

Atais · 技术社区 · 11 年前

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

显而易见的解释:列表显示了所有实体,若您单击某个实体,您可以在默认情况下隐藏的表单中编辑它,类似的操作适用于添加新实体。

问题

我知道这是一个基本的例子,所以这里的解决方案可能有些过火,但我想将“添加新实体”、“编辑实体”和“实体列表”的逻辑分开。我想我可以这样做:

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

我错过了什么

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

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

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

我认为有一些我看不到的简单解决方案,我愿意听取任何建议。谢谢

3 回复 | 直到 11 年前

Isaac 11 年前

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

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

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

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

视图如下所示:

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

用户添加表单.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>

用户编辑表单.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;
        };

  });

Vaibhav Shah 11 年前

您可以使用Angular状态路由来实现这一点。在其中,您将创建状态(不同视图),如-

收割台,收割台添加实体编辑实体列表实体

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

tomastrajan 11 年前

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