javascript - Angularjs ng-repeat，不改变view视图-PHP中文网问答

今天学习angular的时候,我将对于数据定义和操作方法都放到service里面，dom操作当然是放到了directive里面，然后碰到ng-repeat视图不刷新的情况:

index.html


    
        {{book.title}}
        {{book.author}}

directive.js

app.directive('addBookButton',function($_book){
    return {
        restrict: 'A',
        link: function(scope, ele, attr){
            ele.bind('click',function(){
                $_book.service.addBook({title: 'Hello,world', name: 'XL'});
            })
        }
    }
});

service.js

app.service('$_book',['$rootScope',function($rootScope){
    this.service = {
        books: [
            {
            title: 'Magician',
            author: 'Raymood'
            },
            {
            title: 'The Hobbit',
            author: 'J.R.R Tolkien'
            }
        ],
        addBooks: function(book){
            this.books.push(book);
            $rootScope.broadcast('books.update');
        }
    }
}])

MainController.js

app.controller('MainController',function($scope){
    $scope.books = $scope.service.books;
    $scope.$on('books.update',function(){
        $scope.books = $scope.service.books;    
        console.log($scope.books);    //这里打印出来的是包含3个object的数组，但是view层只显示一开始页面刷新的2个object
    })
})

出现的问题是MainController.js里面注释的部分。

但是如果我在MainController.js里面添加一个ng-click事件，触发添加数组这个事件的话，在view层是会动态添加新object的。

暂时没找到是什么原因导致这个情况的出现。