显示项目列表并通过AngularJS对其进行编辑

Question

我尝试使用AngularJS解决经典问题：我需要显示一些实体的列表并提供添加，编辑和查看此实体的详细信息的功能。

我实现了两个控制器：ListController遍历实体和ItemController的列表显示和保存实体的细节。这是HTML代码：

<div ng-app="myApp"> 
<a class="btn" data-toggle="modal" data-target="#modal">Add new item</a> 

<div ng-controller="ListController"> 
    <h4>List</h4> 
    <ul> 
     <li ng-repeat="item in list"> 
      {{item.name}} 
      <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editItem(item)">Edit item</a> 
     </li> 
    </ul> 
</div> 

<div id="modal" role="dialog" class="modal hide fade"> 
    <div ng-controller="ItemController"> 
     <div class="modal-header"> 
      Item Dialog 
     </div> 
     <div class="modal-body"> 
      <label for="txtName" /> 
      <input type="text" id="txtName" ng-model="item.name" /> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary" ng-click="saveItem()" data-dismiss="modal">OK</button> 
     </div> 
    </div> 
</div> 

和控制器代码：

var db_list = [{ name: "Test1" }, { name: "Test2" }]; 
var app = angular.module('myApp', []). 
controller('ListController', function($scope, $rootScope) { 
    $scope.list = db_list; 
    $scope.editItem = function(item) { 
     $rootScope.item = item; 
    } 
}). 
controller('ItemController', function($scope, $rootScope) { 
    $scope.saveItem = function() { 
     db_list.push($rootScope.item); 
     $rootScope.item = null; 
    } 
}); 

您也可以在http://jsfiddle.net/yoyoseek/9Qntw/16/找到工作ptototype。

在此代码的一般问题，即我存储实体显示ListController其使用描述范围（通过editItem（）），但我需要在ItemController此存储实体的信息。我使用$ rootScope来共享实体进行编辑，它看​​起来像黑客。这是正常的做法吗？

此代码有一个显着的缺点：$ rootScope.item必须在模态对话框隐藏被清除。

Answer 1

看起来这里的主要问题是由data-toggle触发的事件发生在你的控制之外，它不是AngularJS绑定的一部分（我是新手，所以我可能是错的）。

无论如何，似乎没有办法在Angular中交叉引用控制器，并且通过检查DOM来获得它们的唯一方法。但是，一旦你进入，你不妨直接初始化范围（http://jsfiddle.net/B4kAW/4/）：

var db_list = [{ name: "Test1" }, { name: "Test2" }]; 

var app = angular.module('myApp', []); 

app.controller('ListController', function($scope) { 
    $scope.list = db_list; 

    $scope.editItem = function(item) { 
     angular.element(document.getElementById("modal")).scope().item = item; 
    }; 
}); 

app.controller('ItemController', function($scope) { 
    $scope.saveItem = function(item) { 
     //db_list.push(item); 
     //$rootScope.item = null; 
    }; 
}); 

注：

1. 这里的模态对话框无法知道是否它打开进行编辑的方式，或添加一个新项目（我注释掉了推送）。
2. 由于对话框与列表中的“主”项链接，因此会立即更新（可以在对话框打开时在背景中看到）。您可能需要复制它，而不是使用参考。

受this answer的启发。它看起来像对话框的“角度方式”是convert them into services。