angularjs - 显示项目列表并通过 AngularJS 编辑它们

Question

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

我实现了两个 Controller :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>

和 Controller 代码:

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;
    }
});

您也可以在 找到工作原型(prototype)。 http://jsfiddle.net/yoyoseek/9Qntw/16/ .

此代码中的一般问题是我存储实体以使用 ListController 的范围显示其描述(通过 editItem())，但我需要在 ItemController 中存储此实体详细信息。我使用 $rootScope 来共享实体进行编辑，对我来说它看起来像是 hack。这是正常的做法吗？

此代码还有一个缺点:必须在模式对话框隐藏时清除 $rootScope.item。

Answer 1

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

无论如何，似乎没有办法在 Angular 中交叉引用 Controller ，而获得它们的唯一方法是通过检查 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;
    };
});

笔记:

这里的模态对话框无法知道它是打开编辑还是添加新项目(我注释掉了推送)。

由于对话框与列表中的“主要”项目链接，它会立即更新它(可以在对话框打开时在后台看到)。您可能需要复制它而不是使用引用。

灵感来自 this answer .看起来对话框周围的“Angular 方式”是 convert them into services .