javascript - Angularjs 在指令中获取数据

Question

我正在用 AngularJs 写博客。我是新来的。 我正在创建 BlogController 和 BlogData 服务。 BlogController 使用 BlogData。 BlogData 使用 $http 并从服务器获取数据。 我的 Controller 是这样的；

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

像这样的blogData服务；

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;
        }
    };
});

它工作得很好。我正在创建一个分页指令(指令使用 jquery 分页库)。像这样的分页指令；

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;
            }
        });
    };
});

指令工作正常，但在 onPageClick 上发布它是未定义的。为什么它不起作用？

Answer 1

正如评论中提到的，scope.$apply() 是必需的，因为 jQuery 插件回调在“外部”Angular 运行。换句话说，onPageClick() 回调在 Angular 不知情的情况下发生，因此即使更新了scope.blogPosts，Angular 也不会注意到范围更新。

因此，解决方法是在 scope.blogPosts = posts; 之后添加 scope.$apply() 以使 Angular 运行摘要循环，这将导致查看更新。