Angularjs: scope.data is undefined inside directive

Question

First off, i found the api address from this topic: Laravel 4 and Angular JS and Twitter Bootstrap 3 Pagination

Now i am working about this, my little script is so:

var app = angular.module('kategori', [
        'ngResource',
        'apiBaseRoute'
    ]);

    app.factory('Data', ['$resource', 'apiBaseRoute', function($resource, config){
        return $resource('http://develop.alexei.me/careers/careers.php?callback=JSON_CALLBACK&page=:page', {
            page: 1
        }, {
            'get': {
                method: 'JSONP'
            }
        });
    }]);

    app.controller('KategoriListCtrl', function($scope, Data){

        $scope.init = function() {
          Data.get({}, function(response){
              $scope.kategoriList = response.careers;


          },function(error){
              console.log("HATA VAR" + error);
          });
        };

    });

    app.directive('paginate', function(){
        return{
            scope:{ allData: '=paginate2' },
            link: function(scope){
                console.log(scope);
            }
        }
    });

And this is the html side :

                <div class="col-md-6 col-md-offset-3" ng-controller="KategoriListCtrl" ng-init="init()">
                {{kategoriList}}
                <div paginate paginate2="kategoriList"></div>
            </div>

as you see, console.log(scope) inside directive is shows a lot of things in console, especially i see allData there with lots data, but if i change it to

console.log(scope.allData)

it prints undefined..

i don't understand why. how can i solve this? thanks.

gkalpak · Accepted Answer · 2014-01-11 19:18:17Z

19

By the time JS reaches your console.log the allData property is undefined (since kategoriList is undefined). kategoriList (and thus allData) is created (and populated with lots of data) asynchronously at a later time.

So, why do you see the data when logging the scope object instead ?

At the time the object is logged it has no property allData (and no data).
But by the time you go over to the console and expand the node and look for the allData property, the property has been added and populated by your AJAX call (using $resource).

It is not clear what you want to do with allData.
If you want to use it in e.g. ng-repeat you don't have to worry: You can use it normally (as if it were defined) and Angular will automatically "pick it up" as soon as it arrives and do stuff.
Yet, if you want (for your own mysterious reasons) to get informed when it is ready, your can use $watch:

scope.$watch('allData', function(newValue) {
    if (newValue !== undefined) {
        console.log(scope.allData);
    }
});

See, also, this short demo.

edited Jan 11, 2014 at 19:18

answered Jan 11, 2014 at 18:52

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

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

4 Comments

yigitozmen Over a year ago

Thank you for answer, i am trying to do pagination system, i will use current_page, etc.. inside directive. i see data without directive normally, with ng-repeat as you said, but i couldnt transfer data into the directive.

gkalpak Over a year ago

OK. Still this does not clarify how you plan on using allData. If you face any problem post the relevant code. BTW, if this post answered your question, please mark it as "accepted".

yigitozmen Over a year ago

i would create two variables one of them would contain only data which will show in the page. other will contain pagination data which came from laravel. allData is variable for pagination data ( page, current_page, last_page, total_page etc..)

gkalpak Over a year ago

You shouldn't face any difficulties. Still, if you run into problems, post a new question providing the relevant code.

Collectives™ on Stack Overflow

Angularjs: scope.data is undefined inside directive

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related