Angular 在服务中更改参数后呈现视图

Question

高级别
我 header 视图和我的 angular 应用程序中的主视图。我希望 header 有一个 "back" 按钮，它是基于我所在页面的 show/hidden。

我做了什么
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 already in progress 而失败，因为我正在将此值更改为 subPageCtrl 构造函数的一部分。

Answer 1

$scope.showBackButton = globalServices.showBack;

仅将 showBackButton 设置为 globalServices.showBack 一次（在控制器初始化期间）。对 globalServices.showBack 的未来更改不会传播到 $scope.showBackButton，这是您的 UI 绑定到的值。

你有两个选择：

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>

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

Answer 2

这是因为当布尔值被传递时，它们是按值分配的（它们是按值类型）所以当你做 $scope.showBackButton = globalServices.showBack; 时它是将 $scope.showBackButton 的值分配给值globalServices.showBack 的值，因此如果您更改 globalServices.showBack 的值，它不会更改 $scope.showBackButton 的值。

要解决此问题，您应该使用通过引用分配的对象：

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

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

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

globalServices.showButtonDetails.showBack = true;

Angular 在服务中更改参数后呈现视图

Angular render view after parameter changed in service

javascript

refresh

angularjs