javascript - 让 Angular 检测 $scope 中的变化

Question

我正在编写我的第一个 AngularJS 应用程序，当从服务接收到的数组发生更改时，我试图获取一条指令来更新其 View 。

我的指令如下所示:

angular.module('Aristotle').directive('ariNotificationCenter', function (Notifications) {
    return {
        replace: true,
        restrict: 'E',
        templateUrl: 'partials/ariNotificationCenter.html',
        controller: function ($scope) {
            $scope.notifications = Notifications.getNotifications();

            $scope.countUnread = function () {
                return Notifications.countUnread();
            };
        }
    };
});

部分内容非常简单:

<p>Unread count: {{countUnread()}}</p>

虽然我的通知服务如下所示:

function Notification (text, link) {
    this.text = text;
    this.link = link;
    this.read = false;
}

var Notifications = {
    _notifications: [],

    getNotifications: function () {
        return this._notifications;
    },

    countUnread: function () {
        var unreadCount = 0;

        $.each(this._notifications, function (i, notification) {
            !notification.read && ++unreadCount;
        });

        return unreadCount;
    },

    addNotification: function (notification) {
        this._notifications.push(notification);
    }
};

// Simulate notifications being periodically added
setInterval(function () {
    Notifications.addNotification(new Notification(
        'Something happened!',
        '/#/somewhere',
        Math.random() > 0.5
    ));
}, 2000);

angular.module('Aristotle').factory('Notifications', function () {
    return Notifications;
});

getNotifications 函数返回对数组的引用，当调用 addNotification 时，该数组会通过 setInterval 设置进行更改。然而，更新 View 的唯一方法是运行 $scope.$apply()，这很糟糕，因为这会删除 Angular 的所有自动魔法方面。

我做错了什么？

谢谢。

Answer 1

我相信您代码的唯一问题是您使用 setInterval 来更新模型数据，而不是 Angular 内置服务 $interval。将 setInterval 的调用替换为

$interval(function () {
    Notifications.addNotification(new Notification(
        'Something happened!',
        '/#/somewhere',
        Math.random() > 0.5
    ));
}, 2000);

并且无需调用 $scope.$apply 即可正常工作。另请记住在工厂实现 Notifications 中注入(inject) $interval 服务。

angular.module('亚里士多德').factory('通知', function ($interval) {

$interval 内部调用 $scope.$apply。