AngularJS - 如何修改 $rootScope 中的变量？答案

【问题标题】：AngularJS - How do I modify variables in $rootScope?AngularJS - 如何修改 $rootScope 中的变量？
【发布时间】：2014-10-31 00:31:48
【问题描述】：

我有一个可能很愚蠢的问题，但是如何在 Angular 中修改 $rootScope 中的变量？我有一个滑入式侧边栏，我想在有人单击缩略图时更改其内容，并且我想出了处理侧边栏中数据来自哪里/侧边栏可见性的最简单方法是全局值, 或在 $rootScope.我试图让一切尽可能简单，但我只是不知道如何处理修改全局变量。

我的角度代码是：

app.run(function($rootScope) {
    $rootScope.currentUrl = { value: 'visual/design/1/' };
    $rootScope.detail_visible = { value: true };
});

app.controller('navController', ['$scope', '$rootScope', 
    function ($scope, $rootScope) {

    $scope.isDetail = $rootScope.detail_visible.value;
    $scope.url = $rootScope.currentUrl.value;
    $scope.hide = function($rootScope) {
        $rootScope.detail_visible.value = false;
    };
}]);

而连接的 HTML 是

<div id="detail_box" ng-class="{d_show: isDetail, d_hide: !isDetail}">
    <a href="#" class="box_close" ng-click="hide()"></a>
    <div ng-include="url + 'detail.html'"></div>
</div>

本质上，我试图让当您单击缩略图时，它会将 currentUrl 值从“visual/design/1/”更改为他们单击的任何内容（例如，“music/solo” /2' 或其他）然后将 detail_visible 的值更改为 false，以便我侧边栏上的类切换，我得到一个不错的小滑入，通过 ng-include 加载新内容，我有点喜欢它一千倍比我想象的要好。我已经为此努力了大约三个小时，只要我有机会就打破这个应用程序上的所有其他内容。我在这里搞砸什么？或者，有没有更好的方法来做到这一点？

我使用全局变量的原因是我在多个控制器中有多个缩略图，并且我希望每个都能够动态更改我的 ng-include 中的 URL。

【问题讨论】：

范围的对象属性是继承的——在你的控制器中，你应该能够修改$scope.detail_visible.value并看到它影响$rootScope。不过，您仍然需要在 .run() 中的 $rootScope 上对其进行初始化。
看，我也想通了，但是点击有问题的链接没有任何作用；我想也许我只需要将 $scope.detail_visible 更改为 $rootScope.detail_visible 但它仍然什么都不做。我想我的问题应该是“为什么这个 ng-click 不起作用”

标签： angularjs web rootscope

【解决方案1】：

对于您的问题，您可以通过使用

来简单地更改 $rootScope 变量

  $rootScope.detail_visible.value = newValue;

但您不需要将 $rootScope 注入您的函数：

  $scope.hide = function() { //without $rootScope
    $rootScope.detail_visible.value = false;
};

但是，我建议您实施一项服务，而不是污染此类任务的根范围。

https://docs.angularjs.org/guide/services

【讨论】：

【解决方案2】：

范围的对象属性是继承的——在您的控制器中，您应该能够修改$scope.detail_visible.value 并看到它影响$rootScope。不过，您仍然需要在 .run() 中的 $rootScope 上对其进行初始化。

app.run(function($rootScope) {
    $rootScope.currentUrl = { value: 'visual/design/1/' };
    $rootScope.detail_visible = { value: true };
});

app.controller('navController', ['$scope', function ($scope, $rootScope) {

    $scope.hide = function() { // don't need to pass an argument
        $scope.detail_visible.value = false;
    };
}]);

查看：

<div id="detail_box" ng-class="{d_show: currentUrl.value, d_hide: !currentUrl.value}">
    <a href="#" class="box_close" ng-click="hide()"></a>
    <div ng-include="currentUrl.value + 'detail.html'"></div>
</div>

【讨论】：