Angularjs 监视绑定属性的指令

Question

我需要创建一个简单的指令，它会在另一个值发生变化时显示一些值。例如它会监视 'event' 并且如果 event.eventDuration === 'Now' 那么它必须将它的值更改为 'Surprise!'.

使用我的代码，我只在控制台中看到一次有效事件。如果我只做一些更改 {{event.eventDuration}} 更改，而不是我的指令。我做错了什么？

在使用它的html代码中我有这个：

    <event-time event="event"></event-time>{{event.eventDuration}}

这是我的自定义指令：

angular.module('my-app').directive('eventTime', function ($c, $compile) {
    var linker = function(scope, element, attrs) {
        scope.$watch('event', function(newValue){
            if (newValue !== undefined && newValue.eventDuration !== undefined) {
                scope.value = newValue.eventDuration;
                element.html(scope.value);
                $compile(element.contents())(scope);
            }
        });
    };

    return {
        restrict: 'E',
        template: '{{value}}',
        transclude: true,
        scope: {
            'event': '='
        },
        link: linker,
        controller: function ($scope) {
            //init value
            $scope.value = 'x';
        }
    };
});

Answer 1

你可以 $watch 一个表达式，像这样：

scope.$watch("event.eventDuration", function(v){
   if (v === "Now"){
      // do whatever you need to display "Surprise!"
   }
});

从您的问题中不清楚应该在何处呈现 "Surprise!" 字符串。如果它只是您在模板中显示的 scope.value，那么您不需要 $compile 任何东西。只需分配 $scope.value = "Surprise!".

Angularjs 监视绑定属性的指令

Angularjs directive watching binded attributes

directive

watch

angularjs