data-binding - AngularJs 绑定指令到 getter 属性

Question

您是否能够使用 AngularJs 将指令绑定到服务上的 getter 属性？

我有一个指令试图监视服务上的属性，它会在应用程序启动时更新一次。然后它永远不会更新，即使被监视的属性更新。

这是我的指令：

authorization.directive("authorization", ["$rootScope", "authenticationService", "authorizationService", function ($rootScope, authenticationService, authorizationService) {
return {
    restrict: "A",
    link: function (scope, element, attrs) {
        var prevDisp = element.css("display");

        function update(user) {
            if (!authorizationService.isAuthorized(attrs.authorization, user)) { element.css("display", "none"); }
            else { element.css("display", prevDisp); }
        }

        scope.$watch(authenticationService.user, function () { update(authenticationService.user); });
    }
};

} ]);

这是我的服务的精简版：

App.factory("authenticationService", function ($http, $location) {
var _user = { email: null, ...... };

return {
    get user() { return _user; }, //This is the property I am trying to bind too
    login: function () { do stuff },
    logout: function () { do other things }
}

});

Answer 1

您要么观看一个实际的函数（这是一个可调用的东西），要么观看一个将$eval在作用域的上下文中被 -ed 的字符串。不是吸气剂，它只会返回对象。

尝试

scope.$watch(function () { return authenticationService.user; },
             function () { update(authenticationService.user); },
             true); // use true to check for differences in object's properties.

Answer 2

$watch评估函数或表达式，如果是表达式，则针对当前范围进行评估。如果您要查看变量，请确保首先将其附加到范围：

scope.user = authenticationService.user
scope.$watch('user', function (user, old) { update(user); });