javascript - 自定义 Angular Directive(指令)以在间隔中添加/删除类

Question

我创建了自己的 Angular Directive(指令)，它将根据传递给它的条件添加和删除一个类，如下所示:

app.directive("alerter", function ($interval, $compile) {
    return {
        restrict: "A",
        link: function ($scope, elem, attrs) {
            var loginExpired = attrs.alerter;
            var addClassInterval = undefined;
            var timer = 3000;
            var className = "alert";

            addClassInterval = $interval(addClass, timer);

            function addClass() {
                if (elem.hasClass(className)) {
                    elem.removeClass(className);
                } else if (loginExpired) {
                    elem.addClass(className);
                }

                $compile(elem)($scope);
            }
        }
    }
});

然后可以将其用作元素的属性，如下所示:

<div alerter="{{model.loginTime > model.expiryTime}}"> ... </div>

但是，即使alerter 评估为 false，它仍然会添加该类，但我不确定为什么？另外，$interval 似乎没有按预期工作，这是我创建的一个用于演示的 Plunker:

http://plnkr.co/edit/YKb6YARLaBnsevuoxv3G?p=preview

谢谢!

编辑

当我删除 $compile(elem)($scope); 时，它解决了我在 $interval 中遇到的问题，但是，我知道其中一个条件已通过in 始终为 false 但它仍然将类应用于它

Answer 1

如果您想通过 attr 解析值，则需要解析 attr.alerter 的值，因为它是字符串(不是 bool 值)

您可以使用此代码来执行此操作:

var loginExpired = $parse(attrs.alerter)();

注意:您需要注入(inject) $parse 服务

另一个(不太理想的解决方案)是仅对 attrs.alerter === 'true' 进行字符串比较