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

Question

您能否使用 AngularJs 将指令绑定(bind)到服务上的 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 编辑的字符串。不是 getter，它只会返回对象。

试试

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