Angularjs directive parses controllers collection

Question

Working on pager directive in angularjs. When I hard code sample collection ($scope.installations) everything is OK, but when I pull data from server 'options' property in directive is always 'undefined'.

Here is my directive:

angular.module("qusion.ui.pager", [])
    .directive("qnPager", [
        function() {
            return {
                restrict: 'A',
                link: function(scope, element, attrs) {
                    var options = scope.$eval(attrs.qnPager);
                    var settings = {
                        source: null,
                        paging: null,
                        schema: {
                            page: 'PageNumber',
                            size: 'Size',
                            totalPages: 'TotalPages',
                            totalCount: 'TotalCount'
                        }
                    };

                    angular.extend(settings, options);


                    scope.$watch(settings.source, function(value) {
                        console.log(settings.source); // UNDEFINED ???
                    });

                }
            };
        }
    ]);

Here is how I am calling it.

<ul qn:pager="{source: installations}">

And finally my controller sample

function MyController(Installation){
   $scope.installations = [];
   // get sample (this works)
   // $scope.installations = [{ID: 1, Title: 'Test 1'}, {ID: 2, Title: 'Test 2'}]
   // get from server (this don't work)
   Installation.getAll().then(function(data) {
       $scope.installations = data.Installations;
   });

}

There are more dependencies behind so it will be a lot of code to paste here. It is just http request returning promise. This part works ok since table in template is filled with installation data. — Andrej Kaurin, Nov 18 '12 at 18:43
Async. Installation.getAll() returns promise. I am using $scope.installations to fill table and works fine. — Andrej Kaurin, Nov 19 '12 at 20:52
It's possible to use isolate scope in your directive? Have you try scope { source : '=installations' } instead? — Azri Jamil, Nov 21 '12 at 00:25

score 0 · Answer 1 · edited May 23 '17 at 12:04

See if this solves your problem:

Instead of assigning a new data array to installation -- i.e., instead of $scope.installations = data.Installations; -- try populating the same array. When you assign a new data array to installations, you may be losing the bindings to the old array -- i.e., the directive may still be bound to the previous data array.

$scope.installations.length = 0
for(var i = 0; i < data.Installations.length; i++){
    $scope.installations.push(data.Installations[i]);
}

See https://stackoverflow.com/a/12287364/215945 for more info.

Update: angular.copy() can/should be used instead:

angular.copy(data.Installations, $scope.installations);

When a destination is supplied to the copy() method, it will first delete destination's elements, and then copy in the new ones from source.

Angularjs directive parses controllers collection

1 Answers1