0

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

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 上的帖子未定义。为什么它不工作？

4

1 回答 1

2

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

因此，修复方法是添加scope.$apply()afterscope.blogPosts = posts;以使 Angular 运行摘要循环，这将导致视图更新。

于 2013-08-31T14:59:00.393 回答