一次性绑定到自定义属性指令

Question

我正在为基于特定属性的自定义指令使用角度一次性绑定 (relative)

这是我的指令：

app.directive('relative', ['$timeout', '$filter', '$compile', function ($timeout, $filter, $compile) {
    var dateFilter = $filter('date');

    return {
        restrict: 'A',
        scope: {
            datetime: '@'
        },
        link: function ($scope, $element, $attributes) {
            var timeout;

            $scope.$watch('datetime', function (dateString) {
                $timeout.cancel(timeout);

                var date = (dateString || $element.text()) * 1000;
                if (!date) return;
                date = new Date(date);
                if (!date) return;

                function update() {
                    var reference = new Date();
                    $element.text(prettyDate(date));

                    //Calculate the next update
                    var diff = Math.abs(date - reference) / 1000;
                    var delta;
                    if (diff < 45) {
                        delta = 45 - diff;
                    } else if (diff < 90) {
                        delta = 90 - diff;
                    } else if (diff < 45 * 60) {
                        delta = 60 - (diff + 30e3) % 60;
                    } else {
                        delta = 3660 - diff % 3600;
                    }

                    timeout = $timeout(update, delta * 1000);
                }

                update();    

                $element.on('$destroy', function () {
                    $timeout.cancel(timeout);
                });
            });
        }
    };
}]);

这就是我使用它的方式：

 <time relative datetime="{{ notice.date }}"></time>

或者：

 <time relative datetime="{{ ::notice.date }}"></time>

问题是：当使用一次性绑定时，如何避免为 datetime 属性创建监视，因为该值永远不会改变？ Angular 会自动完成吗？

Answer 1

我相信您最初是使用$watch 来触发update 函数。您应该避免使用观察者，并选择在观察者之外重构初始化。为了避免 Angular 将监视变量添加到监视列表时的初始触发，您可以这样做 (source)：

$scope.$watch('datetime', function (dateString, oldDateString) {
    // notice the use of strict equality operator '==='
    // angular ensures this will only be true on the initialization of the watcher
    if (dateString === oldDateString) {
        return;
    }
});

使用<time relative datetime="{{ ::notice.date }}"></time> angular 不会在一次性绑定后触发观察者。

在检查了Scope 对象上的$$watchers 属性后，我看不出有或没有$watch 注册的观察者数量有什么区别，我怀疑batarang 正在使用它。

针对您的问题，我认为无法避免创建具有一次性绑定的观察者。

Answer 2

我认为this 是您正在寻找的解决方案。

您可以通过属性获取日期时间值，而不是通过范围对象接受它。这将避免创建不需要的手表。无论如何，您不希望该值会发生变化，因此它实际上不会产生太大影响。