Question

我在我的服务中使用isAuthenticated值。出于某种原因，当服务模型更改时，它不会更新视图。

app.factory('AuthService', function($timeout) {
    var isAuthenticated = false;

    $timeout(function () {
        isAuthenticated = true; }, 2000);

    return {
       data: {'isLoggedIn': isAuthenticated}
    }
});

app.directive('appMainMenu', function (AuthService) {
    return {
        restrict: 'A',
        link: function (scope) {
            scope.model = AuthService;
        }
    };
});

然后HTML：

<div app-main-menu>
    <a href="#login" ng-show="!model.data.isLoggedIn">Guest can Login</a>
    <a href="#logout" ng-show="model.data.isLoggedIn">Member can Logout</a>
</div>

知道为什么这不起作用？

在我使用函数之前，但是在每个$ digest上执行递归循环（在第10次之后停止），所以我认为这不是正确的方法。这是一个有人在这里建议给我的方法。

看起来像：

app.factory('AuthService', function($timeout) {
    var isAuthenticated = false;

    $timeout(function () {
        isAuthenticated = true; }, 2000);

    return {
        isLoggedIn: function () {
            return isAuthenticated;
        }
    }
});

app.directive('appMainMenu', function (AuthService) {
    return {
        restrict: 'A',
        link: function (scope) {
            scope.isLoggedIn = function () {
                return AuthService.isLoggedIn();
            };
        }
    };
});

<div app-main-menu>
    <a href="#login" ng-show="!isLoggedIn()">Guest can Login</a>
    <a href="#logout" ng-show="isLoggedIn()">Member can Logout</a>
</div>

最终结果是有效的，但是如果你在.LoggeIn（）中的console.log（...），你会看到它在每个$ digest上发射了10次。

Answer 1

视图中未更新，因为您的服务未对其进行更新。：）

当您的服务由工厂函数创建时，返回值（将成为您的服务对象）是：

{ data: {'isLoggedIn': isAuthenticated} }

isAuthenticated是您返回对象时的值。它相当于：

{ data: {'isLoggedIn': false} }

这是因为isAuthenticated是一个布尔值 - 一个原始值，它被赋值为“by-value”，而不是“by-reference”。

如果你做了类似下面的事情，那就可以了：

app.factory('AuthService', function($timeout) {
    var isAuthenticated = false;
    var svc = {data: {isLoggedIn: isAuthenticated }};
    $timeout(function () {
        svc.data.isAuthenticated = true; }, 2000);

    return svc;
});

如何将服务值与指令范围绑定，以便在模型更改时查看更新？

1 个答案: