2

我尝试使用 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/找到工作原型。

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

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

4

1 回答 1

3

看起来这里的主要问题是事件触发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. 由于对话框与列表中的“主要”项目链接，它会立即更新它（可以在对话框打开时在后台看到）。您可能需要复制它而不是使用参考。

受到这个答案的启发。看起来对话的“角度方式”是将它们转换为 services。

于 2014-04-17T06:22:43.293 回答