Question

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

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

我正在使用两个控制器，两个html模板和一个工厂。当我更改详细信息项时，为什么第一个列表没有更新？我是AngularJS的新手，所以请耐心等待。

列出控制器

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>

详情控制器

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会为您缓存视图。

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

所以..尝试在控制器中添加这样的东西：

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

退房：http://ionicframework.com/blog/navigating-the-changes/

Angularjs列表/详细信息编辑

1 个答案: