0

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

4

2 回答 2

0

对于您的问题，您可以通过引用它来简单地更改 $rootScope 变量 

  $rootScope.detail_visible.value = newValue;

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

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

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

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

于 2014-10-30T16:30:41.887 回答
0

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

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>
于 2014-10-30T16:31:48.473 回答