Angularjs 列表/详细信息编辑

Question

我正在编写一个小型 AngularJS/Ionic/Cordova 应用程序，其中有一个联系人列表。当用户点击联系人时，我会导航到一个新页面，其中显示该联系人的详细信息(名字、姓氏、电话号码)。在这里，用户可以更新有关联系人的详细信息，或删除联系人。我遇到的问题是，当用户删除联系人时，列表在返回后仍然显示已删除的项目。

现在，我将联系人列表存储在 localStorage 中，但我计划最终将这些值保留在 SQLite 和/或 Web 服务中。

我正在使用两个 Controller 、两个 html 模板和一个工厂。当我更改详细信息项目时，为什么第一个列表没有更新？我对 AngularJS 很陌生，所以请耐心等待。

列表 Controller

angular
.module('app')
.controller('contactListCtrl', ['$scope', 'Contacts',
    function($scope, Contacts) {

        $scope.contacts = Contacts.get();

    }
])

列表模板

<ion-content scroll="false" class="padding-horizontal" has-header="true">
    <div class="row padding-vertical">
        <div class="col col-center text-center">
            <span class="small-text primary-text-color">Contact List</span>
        </div>
    </div>

    <div class="row" >
        <div class="col col-center">
            <ul class="list">
                <li class="item" ng-repeat="contact in contacts" ui-sref="contactListEdit({id: $index})">
                    {{contact.fName}} {{contact.lName}}
                </li>
            </ul>
        </div>
    </div>
</ion-content>

细节 Controller

angular
    .module('app')
    .controller('editContactCtrl', ['$scope', '$stateParams', 'Contacts',
    function($scope, $stateParams, Contacts) {
        var contactId = false;

        if ($stateParams.id !== 'undefined') {
            contactId = $stateParams.id;
        }

        $scope.contact = Contacts.get(contactId);
        $scope.contactId = contactId;

        $scope.delete = function(index) {
            Contacts.removeContact(index);
            window.history.back();
        };
    }
])

详细模板

<ion-content scroll="false" class="padding-horizontal" has-header="true">
    <div class="row padding-vertical">
        <div class="col col-center text-center">
            <span class="medium-text primary-text-color">Edit contact</span>
        </div>
    </div>

    <div class="list">
    <label class="item item-input">
        <input type="text" placeholder="First Name" ng-model="contact.fName">
    </label>
    <label class="item item-input">
        <input type="text" placeholder="Last Name" ng-model="contact.lName">
    </label>
    <label class="item item-input">
        <input type="text" placeholder="Phone" ng-model="contact.mobile">
    </label>
    <label class="item item-input">
        <input type="text" placeholder="Email" ng-model="contact.email">
    </label>
    <button ng-click="save()" class="button button-full button-positive">
        Save
    </button>
    <button ng-click="delete(contactId)" class="button button-full button-assertive">
        Delete
    </button>
    </div>
</ion-content>

联系工厂

angular
    .module('app')
    .factory('Contacts', ['$http',
        function($http) {
            return {
                get: function(index) {
                    var contacts;
                    try {
                        contacts = JSON.parse(window.localStorage.getItem("contacts"));
                        if (index >= 0) {
                            return contacts[index];
                        }
                        return contacts;
                    } catch (e) {
                        console.log("error parsing json contacts");
                        return false;
                    }
                },

                removeContact: function (index) {

                    var contactList = this.get();
                    if (index !== -1) {
                        contactList.splice(index, 1);
                    }
                    console.log(contactList);
                    this.saveContacts(contactList);
                },

                setDefaultContacts: function() {
                    var self = this;
                    return $http.get('./mock_data/contacts.json').then(function(response) {
                        // contacts already exist, don't set.
                        if (window.localStorage.getItem("contacts")) {
                            return false;
                        } else {
                            self.saveContacts(response.data);
                            return true;
                        }
                    });
                },
                saveContacts: function(contactList) {
                    window.localStorage.setItem("contacts", JSON.stringify(contactList));
                },
            };
        }
    ])

Answer 1

我想您会发现当您导航回 contactListCtrl 时(删除后)，它没有被再次设置。我相信这是因为 Ionic 为您缓存了 View 。

您需要做的是监听 $ionicView.beforeEnter 事件，并在收到此事件时将联系人列表加载到 ContactListCtrl 范围中。

所以..尝试添加这样的东西到你的 Controller :

$scope.$on('$ionicView.beforeEnter', function() {
        $scope.contacts = Contacts.get();
    }
);

查看:http://ionicframework.com/blog/navigating-the-changes/