Router UI Sudut: Memanggil fungsi pengontrol status anak

Pabrik bersifat tunggal dan dapat digunakan untuk berbagi data dan fungsi di seluruh pengontrol. Anda dapat menulisnya seperti ini:

app.factory("DataService", ["$http", function($http){
    var contacts = [];

    return {
        //sharing functions
        postItem: function(url, item) {
            return $http({
                url: url,
                method: 'POST',
                data: item
            });
        },
        putItem: function(url, item) {
            return $http({
                url: url,
                method: 'PUT',
                data: item
            });
        },
        deleteItem: function(url, item) {
            return $http({
                url: url,
                data: item,
                method: 'DELETE'
            });
        },
        setContacts = function(contacts) {
            contacts = contacts;
        },
        addContacts = function(contact) {
            contacts.push(contact);
        },
        deleteContact = function(contact) {
            var idx = this.contacts.indexOf(contact);
            contacts.splice(idx, 1);
        }
    };
}]);

Kemudian, di pengontrol Anda:

app.controller("ContactDetailsCtrl", ["$scope", "DataService", function($scope, DataService){
    $scope.deleteContact = function() {
        DataService.deleteItem('path/to/delete', { contactId: 123 }).then(function(response) {
            //remove from client-side array once it's removed form db
            DataService.deleteContact(contact);
        }).catch(function(response){
            //an error occurred
        });
    }
}]);

Saya telah beralih dari gaya ini dan hanya menangani semuanya dari pengontrol dengan daftar. Jika Anda menghapus item dari pengontrol detail atau mengedit bidang yang ditampilkan di pengontrol induk, Anda tetap harus memperbarui pengontrol daftar. Ketika saya melakukannya seperti yang Anda lakukan sekarang, sepertinya saya harus melewati banyak rintangan tambahan yang disebabkan oleh detailnya ada di satu pengontrol dan daftarnya ada di pengontrol lain. Saya biasanya hanya memiliki properti daftar yang berupa array di pengontrol saya dan properti baris saat ini yang merupakan catatan lengkap yang ditampilkan. Lalu saya menggunakan ng-if untuk memeriksa baris saat ini dan menampilkannya dengan tepat. Ketika satu baris diklik, saya menggunakan $location.search untuk memperbarui url dan juga memeriksa $location search saat startup untuk tautan dalam. Hal ini menghasilkan satu pengontrol yang sedikit lebih besar, namun masih lebih kecil dari gabungan 2 pengontrol. Jika saya hanya menangani beberapa bidang, saya menyertakan semua bidang dalam daftar. Jika ada banyak data, saya melakukan panggilan layanan ketika item saat ini dalam daftar diubah untuk mendapatkan data untuk CurrentRow dan hanya memperbarui CurrentRow.

Saya pribadi suka membuat struktur berikut dalam kasus seperti itu.

Status router:

• app.contacts.index - Untuk memuat toolbar untuk tampilan detail/daftar
• app.contacts.list - Untuk daftar
• app.contacts.detail - Untuk detailnya

Pengontrol (untuk setiap resp negara bagian):

function IndexCtrl($scope)
{
   $scope.contact = {}; // For containing the selected contact
   $scope.contacts = []; // List of contacts also on the parent view

   // Define Detail View functions here
   $scope.edit = Edit;
   $scope.delete = Delete;

   // Perform operations on $scope.contact/$scope.contacts
   function Edit() {}
   function Delete() {}
}

function DetailCtrl($scope)
{
    $scope.contact = $scope.$parent.contact = $scope.$parent.contacts[id]; // This way we work with the parent contact defined in IndexCtrl
}

function ListCtrl($scope, Contacts) 
{
    $scope.contacts = $scope.parent.contacts = Contacts.list(); // Contacts Service to retrieve the contact list
}