自定義的角度指令以在間隔中添加/刪除類

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>

但是，即使Alerter評估為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而不是孤立的范圍，則始終為true，那么您必須檢查類似

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