javascript - 在服务中更改参数后的 Angular 渲染 View

Question

高水平
我的 Angular 应用程序中的标题 View 和主视图。我希望标题有一个“后退”按钮，该按钮根据我所在的页面显示/隐藏。

我做了什么
app.js(片段)

app.factory('globalServices', function() {
    return {
        showBack : false,
        back: function() {
            window.history.back();
        }
    };
});

header.html(片段)

<a class="button-prev" ng-click="back()" ng-show="showBackButton">
    Back
</a>

headerCtrl.js(片段)

$scope.showBackButton = globalServices.showBack;
$scope.back = function() {
    globalServices.back();
};

subPageCtrl.js(片段)

globalServices.showBack = true;

问题
更改值后，按钮的有效性不会刷新。当我再移动一页后，我才看到值发生了变化。

有办法解决吗？

我也愿意采用不同的方法。

编辑
尝试调用 $scope.$apply(); 也失败，并出现错误 $digest已经在进行中，因为我正在将此值作为 subPageCtrl 构造函数的一部分进行更改。

Answer 1

$scope.showBackButton = globalServices.showBack;

仅将 showBackButton 设置为 globalServices.showBack 一次(在 Controller 初始化期间)。 future 对 globalServices.showBack 的更改不会传播到 $scope.showBackButton，这是您的 UI 绑定(bind)到的值。

您有两个选择:

1)

$scope.$watch('globalServices.showBack', function(){
    $scope.showBackButton = globalServices.showBack;
}

此选项将监视 globalServices.showBack 的更改，然后设置 $scope.showBackButton 以匹配任何更改。

或

2)

$scope.globalServices = globalServices;

<a class="button-prev" ng-click="globalServices.back()" ng-show="globalServices.showBackButton">
    Back
</a>

此选项直接向您的 UI 公开 globalServices。我就是这样做的。