Angularjs get data in directive

Question

i'm writing a blog by AngularJs. i'm new in it. I'm create a BlogController and BlogData Service. BlogController use BlogData. BlogData use $http and get data from server. my controller like this;

barbarapp.controller('BlogController', function ($scope, blogData) {
    $scope.blogPosts = blogData.getBlogPosts(0);
});

blogData service like this;

barbarapp.factory('blogData', function ($http, $q) {
    return {
        getBlogPosts: function (pageNumber) {
            debugger;
            var deferred = $q.defer();
            $http({
                url: 'Blog/GetBlogPosts',
                method: 'POST',
                data: { 'pageNumber': pageNumber }
            }).success(function (response) {
                deferred.resolve(response.posts);
            });
            return deferred.promise;
        }
    };
});

it is works fine. And i'm create a directive for pageniation (directive use a jquery pagination library). pagination directive like this;

barbarapp.directive('createPagination', function (blogData, $q) {
    return function (scope, element) {        
        $(element).pagination({
            items: scope.postCount,
            itemsOnPage: scope.itemsOnPage,
            cssStyle: "light-theme",
            onPageClick: function () {
                var posts = blogData.getBlogPosts(this.currentPage);
                scope.blogPosts = posts;
            }
        });
    };
});

directive works fine but posts on onPageClick it's undefined. why it is not work?

the problem could be this.currentPage. I don't see where it is — Khanh TO
– Khanh TO, Commented Aug 30, 2013 at 13:23
I deleted my answer about promises since ganaraj and Khanh TO pointed out that the premise of the answer was actually false, to avoid any confusion. — Erik Honn
– Erik Honn, Commented Aug 30, 2013 at 14:05
@khanh TO; i delete this.CurrentPage and put 2 in here. Also This not work. — Baris
– Baris, Commented Aug 30, 2013 at 14:17

Mark Rajcok · Accepted Answer · 2013-08-31 14:59:00Z

2

As mentioned in the comments, scope.$apply() is needed because the jQuery plugin callback runs "outside" Angular. In other words, the onPageClick() callback happens without Angular knowing, so even though scope.blogPosts is updated, Angular doesn't notice the scope update.

So, the fix is to add scope.$apply() after scope.blogPosts = posts; to cause Angular to run a digest cycle, which will cause the view to update.

answered Aug 31, 2013 at 14:59

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

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

Collectives™ on Stack Overflow

Angularjs get data in directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related