观察属性的角度指令

Angular directive that watches a propertie

本文关键字：指令 属性 观察      更新时间：2023-09-26

我喜欢编写一个小的Angular指令，在用户登录时隐藏或显示元素。我注入的身份验证工厂基本上是读取值并将值写入cookie。问题是，"scope.$watch（authentication.isAuthenticated）"只调用一次。如果"isAuthenticated"发生更改，则不会调用事件/观察程序。

app.directive('IfUserIsLoggedin', ["authentication", function (authentication) {  
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        function setClass() {
            if (element !== undefined) {
                if (authentication.isAuthenticated) {
                    element.removeClass("hidden");
                } else {
                    element.addClass("hidden");
                }
            }
        }
        scope.$watch(authentication.isAuthenticated, function () {
            setClass();
        });
        setClass();
    }
};}]);

我在代码中使用了Angular文档中的这个示例。

您的代码不起作用的原因是您正在观察的值不在范围内。要么将其添加到范围中，要么使用不同形式的$watch（…），如下所示：

scope.$watch(function() { return authentication.isAuthenticated }, function () {
    setClass();
});

并且您的代码会很高兴：）。

相关文章：