Question

我有一个可能非常愚蠢的问题，但如何在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>

从本质上讲，我试图制作它，以便当您点击缩略图时，它会改变来自＆＃39; visual / design / 1 /＆＃39;无论他们点击了什么（比如，＆＃39; music / solo / 2＆＃39;或其他什么），然后将detail_visible的值更改为false，以便我的侧边栏上的类切换，我得到一个很好的小滑入式，通过ng-include加载新鲜内容，我比我想象的要多一千倍。我现在已经对这个问题大打了三个小时，只要有机会就打破这个应用程序上的所有其他内容。我搞砸了什么？或者，有更好的方法吗？

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

Answer 1

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

引用它来更改$ rootScope变量

  $rootScope.detail_visible.value = newValue;

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

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

但是，我建议您实施一项服务，而不是污染rootcope以完成此类任务。

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

Answer 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>

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

2 个答案: