我想最好用图片来描述它。我有一个角度应用程序，这是一个简单的视图。
明显的解释：列表显示所有实体，如果单击一个实体，则可以默认情况下隐藏的形式对其进行编辑，并且类似的操作适用于添加新实体。
问题
我知道这是一个基本示例，因此这里的解决方案可能有点过分，但是我想将“添加新实体”，“编辑实体”和“实体列表”的逻辑分开。我以为我可以这样实现：
<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>
我想念的
我很难共享隐藏部分的状态。例如一些布尔标志。例如：
单击实体显示编辑表单
在编辑表单中保存/取消隐藏零件
然后，我认为第一步是列表控制器的责任，但是保存/取消部分交给编辑控制器。与两者中包含的服务共享价值是可能的-但这似乎也不合理。
我认为有一些我看不到的简单解决方案，我愿意接受任何建议。谢谢！
最佳答案
如果您的目标是一个简单的解决方案，只需在模型中切换一个布尔值，则可以使用以下子控制器：
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;
};
});