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

注意：

此处的模态对话框无法知道是否已打开进行编辑或添加新项目（我注释了推送）。
由于对话框与＆＃34; main＆＃34;列表中的项目，它会立即更新（在对话框打开时可以在背景上看到）。您可能需要复制它而不是使用引用。

受this answer的启发。看起来像＃Angular方式＆＃34;对话框周围是convert them into services。

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

1 个答案: