angular js model doesn't bind

Question

I am using AngularJS and I don't manage to bind properly models that need time to load. I have this service called ListService:

angular.module('3pix').factory('ListService', ['$q', '$timeout', 'underscore', 'Item', 'ItemResource',
    function ($q, $timeout, _, Item, ItemResource) {
        var List = function () {
        };
        _.extend(List.prototype, {
            _addItem: function(item) {
                this.items || (this.items = []);
                this.items.push(item);
            },
            loadItems: function() {
                var scope = this;
                var deferred = $q.defer();
                ItemResource.get_items({id: 39}, function(itemsData) {
                    itemsData.forEach(function(itemData) {
                        scope._addItem(new Item(itemData));
                    });
                    deferred.resolve(scope.items);
                });
                return deferred.promise;
            }
        });

        return List;
    }]);

My real ListService is far more complicated than this but I copied only the relevant parts so I can ask my question clearly.
My controller called ListController and it gets a 'list' from the router using 'resolve' option:

angular.module('3pix').controller('ListController', ['$scope', 'jquery', 'list',
    function ($scope, $, list) {
        $scope.list = list; //<-------- Here I got the list, I get it fine from the router
        list.loadItems(); //<------- Here I load the list's items
}]);

In my view I have:

<div class="item-wrapper"
     ng-repeat="item in list.items">
     {{item}}
</div>

My problem is that after the items are loaded in the controller, the view doesn't displays the items and keeps drawing nothing. I tried to wrap the loadItems's success method in $timeout and $rootScope.$apply but it doesn't help. Any idea how to solve it?

UPDATE
I followed the advice of @Chandermani and I did in my controller:

list.loadItems().then(function() {
    $scope.items = list.items;
});

The items are loaded in the view, but still, sometimes, when I update list.items using _addItem() method, nothing happen and the view doesn't show the new items. I tried to wrap _addItem() with $timeout as follows but it didn't helped either:

  _addItem: function(item) {
        $timeout(function() {
            this.items || (this.items = []);
            this.items.push(item);
        });
    }

since you are returning promise where is your then statement in controller ?? — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Jul 29, 2013 at 7:35
@Ajaybeniwal: What should be the statement in the controller? List.items is changes, shouldn't it effect on the controller's list.item? — Naor
– Naor, Commented Jul 29, 2013 at 8:20

Chandermani · Accepted Answer · 2013-07-29 07:49:13Z

1

I think the problem is that you are assigning the scope list to the service instance instead of the method result.

Change it to

angular.module('3pix').controller('ListController', ['$scope', 'jquery', 'list',
    function ($scope, $, list) {
        $scope.list = list.loadItems()
}]);

Also can you try this in html

ng-repeat="item in list"

answered Jul 29, 2013 at 7:49

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Naor Over a year ago

list also contains other properties that I need in my views. In my question I reduced the class to what necessary.

Chandermani Over a year ago

You can still use the list service variable. The list service you have defined does not contain any items property that you are binding to. So you either bind the promise or you bind the return value retrieved using then method on promise.

Naor Over a year ago

I prefer not to add a property on the controller because I already have this property in the List service. More then that, List has other methods that add items. Is there any other way to do it?

Chandermani Over a year ago

I am not talking about adding any property on controller but the sevice you have injected does not have a property items which you are trying to bind in the view

Naor Over a year ago

The service does have the property items: List.items holds the items.

|

Collectives™ on Stack Overflow

angular js model doesn't bind

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related