AngularJS工厂数据未在控制器中更新

时间:2016-04-08 20:17:14

标签: angularjs angularjs-factory angularjs-1.5

我不确定我做错了这就是我设置其他工厂来分享数据的方式,尽管我可以看到,但即使数组应该通过引用传递,我也不会覆盖数组所以引用不会丢失模板永远不会加载我可以看到从查找所有请求下来的数据。任何人都可以看到我已经/没有做过什么让这个工厂工作并在控制器之间共享?

我最初设置它不使用服务,所以我知道从请求返回的数据确实适用于视图,如果你查看我的存根,数据就在那里(它看起来一样),但视图从不更新。如果这是一个非常明显错误的东西,我已经错过了,似乎并不理解,我也很欣赏快速评论,因为我认为它是事实对象/数组通过引用传递,这使得这一切都有效。

通讯录控制器

// Stripped down for brevity...
(function () {

    'use strict';

    function ContactsController(ContactsFactory,
                                ContactsResource) {

        var vm = this;

        vm.contacts = ContactsFactory.get();

        vm.findAll = function () {

            ContactsResource
                .all()
                .then(function (response) {
                    ContactsFactory.add(response.contacts); // <-- an array of objects for example: [{id: 5, username: "Richard39", email: "Sanford.Marilyne@Gibson.org",…},…]
                });
        };

        vm.remove = function (contact, index) {

            ContactsResource
                .remove()
                .then(function (response) {
                    ContactsFactory.remove(index);
                });
        };

        function init() {
            vm.findAll();
        }

        init();
    }

    ContactsController.$inject = [
        'ContactsFactory',
        'ContactsResource'
    ];

    angular
        .module('app')
        .controller('ContactsController', ContactsController);

})();

通讯录服务

// Stripped down for brevity...
(function () {

    'use strict';

    function ContactsFactory() {

        var contacts = [];

        function get() {
            return contacts;
        }

        function add(contacts) {

            console.log(contacts) // <-- array of objects

            angular.forEach(contacts, function(contact) {

                console.log(contact) // <-- object
                contacts.list.push(contact);
            });

            console.log(contacts) // <-- objects pushed onto array [Object, Object, Object, Object, Object,…]

            // But no update in view, which worked with same resource 
            // request, prior to switching to factory to share between 
            // controllers
        }

        function remove(index) {
            contacts.splice(index, 1);
        }

        // ---
        // PUBLIC API.
        // ---

        return {
            get: get,
            add: add,
            remove: remove
        };
    }

    ContactsFactory.$inject = [];

    angular
        .module('app')
        .factory('ContactsFactory', ContactsFactory);

})();

更新

使用@ Rob的建议让这个工作,我注意到如果我添加service.contacts作为getter的返回值它也可以工作,我验证了联系人可以删除。 所以我仍然有兴趣知道为什么这样做而不仅仅是使用像上面例子那样的联系人数组。数组是不是像我原先想的那样通过引用传递的,它只是对象?我只想给自己错误的地方写上一个名字,这是令人难忘的。

(function () {

    'use strict';

    function ContactsFactory() {

        var service = {
            contacts: []
        };

        function get() {
            return service.contacts;
        }

        function add(contacts) {
            angular.forEach(contacts, function(contact) {
                service.contacts.push(contact);
            });

            console.log(contacts);
        }

        function remove(index) {
            contacts.splice(index, 1);
        }

        return {
            contacts: service.contacts, // <-- Rob's suggestion
            get: get, // <-- this also works now as well
            add: add,
            remove: remove
        };
    }

    ContactsFactory.$inject = [];

    angular
        .module('app')
        .factory('ContactsFactory', ContactsFactory);

})();

0 个答案:

没有答案