Question

我已经创建了我自己的angular指令，它将根据传递给它的条件添加和删除一个类，如下所示：

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>

但是，即使警报器评估为false，它仍会添加课程，但我不确定为什么？此外$interval似乎没有按预期工作，这里是为了展示而创建的一个Plunker：

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

谢谢！

修改

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

Answer 1

如果您想通过attr解析值，则需要解析attr.alerter的值，因为它是以字符串形式出现的（不是布尔值）

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

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

注意：您需要注入$parse服务

另一个（不太理想的解决方案）是对attrs.alerter === 'true'

进行字符串比较

Answer 2

var loginExpired = attrs.alerter;

这将永远是真的，因为你得到的属性值是“true”或“false”都不是空字符串因此如果你想使用attrs而不是一个孤立的范围总是真的那么你将不得不检查一些东西像

var loginExpired = /true/.test(attrs.alerter);

自定义角度指令，用于在间隔中添加/删除类

修改

2 个答案: