AngularJS:处理全局变量的最佳方式($ rootScope或全局服务?)

时间:2015-12-27 16:05:22

标签: angularjs

我在使用$ rootScope和全局服务之间徘徊。

$ rootScope感觉很脏并且带有全局变量的所有问题,所以我想使用全局服务,但Angular FAQ说:

  

当然,全球状态很糟糕,你应该谨慎使用$ rootScope,   就像你希望用任何语言的全局变量一样。   特别是,不要将它用于代码,只用于数据。如果你很想   把一个函数放在$ rootScope上,把它放在一个几乎总是更好   可以在需要的地方注入,更容易注入的服务   测试

     

相反,不要创建一个生活中唯一目的的服务   存储并返回数据位。

......这就是我想要使用该服务的目的。

例如,我有一个导航栏,当在移动屏幕上切换时,应该在body和html元素中添加一个类。我用指令和控制器来处理它。

NavbarController:

function NavbarController($rootScope) {
    var vm = this;
    vm.toggleNav = toggleNav;
    $rootScope.navCollapsed = false;

    function toggleNav() {
        $rootScope.navCollapsed = !$rootScope.navCollapsed;
    }
}

正如你在那里看到的那样,我使用rootScope作为navCollapsed值,在我的指令中我这样做:

function navOpen($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            scope.$watch(function () {
                return $rootScope.navCollapsed;
            }, function () {
                if ($rootScope.navCollapsed)
                    element.addClass('nav-open');
                else
                    element.removeClass('nav-open');
            });
        }
    };
}

它工作正常,但使用$ rootScope感觉很脏。我宁愿做这样的事情:

NavbarController:

function NavbarController(globalService) {
    var vm = this;
    vm.toggleNav = toggleNav;
    globalService.navCollapsed = false;

    function toggleNav() {
        globalService.navCollapsed = !globalService.navCollapsed;
    }
}

在指令中:

function navOpen(globalService) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            scope.$watch(function () {
                return globalService.navCollapsed;
            }, function () {
                if (globalService.navCollapsed)
                    element.addClass('nav-open');
                else
                    element.removeClass('nav-open');
            });
        }
    };
}

完全相同的事情除了现在价值在一个地方并且不能在其他地方无意中改变哪个更好,但根据AngularJS团队这是不好的做法,因为它是“数据位”。

解决这个问题的最佳方式是什么?我有其他具有类似功能的变量需要是全局的(能够在任何控制器中访问以进行操作),而不必使用$ rootScope。

0 个答案:

没有答案