angularjs - アイテムのリストを表示し、AngularJS を介して編集します

Question

AngularJS を使用して古典的な問題を解決しようとしています。いくつかのエンティティのリストを表示し、このエンティティの詳細を追加、編集、および表示する機能を提供する必要があります。

2 つのコントローラーを実装します。エンティティのリストを反復処理する 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 を使用してエンティティを共有して編集しますが、ハックのように見えます。それは通常の習慣ですか？

このコードにはもう 1 つの欠点があります。モーダル ダイアログの非表示時に $rootScope.item をクリアする必要があります。