在angularjs中保存全局变量和函数的位置?

时间:2016-07-19 13:04:59

标签: angularjs

我有一些变数&我的项目中的功能,我需要在每个页面中。变量中的数据来自cookies&在函数中我正在调用一些服务来获取数据。现在我将它们保存在一些控制器和放大器中。使用$ rootScope进行全局访问,但是当我重新加载页面时这没有用。所以我应该在哪里保留这些变量&功能? 提前致谢

这是控制器代码 -

pkController.controller('domainOneController', [
        '$scope',
        '$cookies',
        '$route',
        '$location',
        '$mdSidenav',
        '$rootScope',
        'domainService',
        'subDomainService',
        function($scope, $cookies, $route, $location, $mdSidenav, $rootScope,
                domainService, subDomainService) {
        /*getting username from cookies to display in dashboard & if not found then redirect to login page*/

        $rootScope.role = $cookies.get('role');
        $rootScope.userInfo = $cookies.get('login');
        $rootScope.id = $cookies.get('id');
        $rootScope.isSidenavOpen = false;

        if ($rootScope.userInfo == undefined
                || $rootScope.role == undefined) {
            $location.path("/");
        }
        $rootScope.$route = $route;

        /*for opening slider*/

        $rootScope.openSlider = function() {

            $mdSidenav('left').toggle();
        };

        /*getting sub-domains from service & showing sub-domains of first domain on page loading*/

        $scope.subDomains = subDomainService.getSubDomain(1);
        $scope.subDomains.success(function(data, status, headers, config) {

            $scope.subDomainNames = data.subdomains;

        }).error(function(data, status, headers, config) {

        });

        /*switching between pages by clicking on slider & updating sub-category*/

        $rootScope.redirect = function(id, domain) {

            $rootScope.pageTitle = domain; //changing page title while switching between domains

            $scope.subDomains = subDomainService.getSubDomain(id + 1);
            $scope.subDomains.success(
                    function(data, status, headers, config) {

                        $rootScope.subDomainNames = data.subdomains;

                    }).error(function(data, status, headers, config) {

            });

            switch (id) {
            case 0:

                $location.path("/domain_one/dashboard");
                break;

            case 1:

                $location.path("/domain_two/dashboard");
                break;

            case 2:

                $location.path("/domain_three/dashboard");
                break;

            case 'myKpi':

                $location.path("/myKpi/dashboard");
                break;
            }

            $mdSidenav('left').toggle();
        };

        /*getting domains*/

        $rootScope.domainNames = [];
        $scope.domains = domainService.getDomain();
        $scope.domains.success(function(data, status, headers, config) {

            $rootScope.pageTitle = data.domains[0].Domain.name; //setting page title

            for (var i = 0; i < data.domains.length; i++) {

                $rootScope.domainNames.push(data.domains[i].Domain.name);
            }

        }).error(function(data, status, headers, config) {

        });

    } ]);

这是我正在使用这些变量和功能的html页面 -

            <div layout="row" class="nav nav-stacked sliderMenu">
            <md-sidenav md-component-id="left" md-is-open="isSidenavOpen">
                <div layout="column" >
                    <md-button class="panel-button firstBlock" ng-click="openSlider()"><i class="fa fa-bars" aria-hidden="true"></i></md-button>
                    <md-button ng-repeat="domain in domainNames" ng-click="redirect($index,domain)" >{{domain}}</md-button>
                    <md-button ng-click="redirect('myKpi')">My Kpis</md-button>
                    <md-button class="upload">Upload</md-button>
                </div>
            </md-sidenav>
        </div>

<!-- Menu Slider Starts -->

<div

    <label>Subcategory : </label>
     <md-select  placeholder="All Category" ng-model="SubDomains">
        <md-option ng-repeat="(key,value) in subDomainNames" value="{{value}}">{{value}}</md-option>
    </md-select>
</div>

3 个答案:

答案 0 :(得分:1)

对于跨控制器所需的功能

您可以使用以下内容:

  • 服务

用于存储跨控制器所需的变量

  • 您可以根据要求存储在localStorage或sessionStorage中。 例如,如果您需要关闭浏览器选项卡等时不应丢失的数据,则应使用localStorage

    例如:在没有登录的情况下将wishlist存储在电子商务网站中你使用localStorage,这样当用户以后返回时,可以看到心愿单数据

  • 您还可以使用服务来存储公共变量,并在运行时动态地在控制器内访问它们。 注意:此处可变数据可能在刷新时丢失,除非您将其存储在后端并在每次刷新时调用API

答案 1 :(得分:0)

将变量存储在$rootScope中并不是一个好主意,因为刷新后数据不可用,因此您可以使用浏览器的local storagesession storage来存储变量,也可以使用像ngStoragehttps://github.com/gsklee/ngStorage)这样的库可以更好地处理。至于功能,角度服务会很好。

  

有关使用角度提供程序的更多信息,请访问:   https://gist.github.com/demisx/9605099

答案 2 :(得分:0)

我经常走出严格的“MVC”模型并定义一个名为globals 的单个对象(我很有想象力......),它在JS中定义任何需要它的人都包含的文件。此对象具有与本地存储交互的load()save()方法。 (该对象实际上只会“加载”一次,即使被要求多次这样做。)每个客户都有义务在某个时候调用save()(尝试在析构函数中执行此操作会产生计时问题。)

整个应用程序中存在的所有“全局变量”都被定义为此单例对象的属性。 (即使它们实际上并没有被“保存”。)这使得它明确而明确地说明了“这个应用程序的'全局'值'是什么。它明确地说明了可以在源代码中找到对它们的引用。

它还集中将全局变量(必要时)保存到本地存储的职责。该应用程序的其他任何部分都没有直接引用本地存储。该对象还检测用户关闭本地存储的情况,例如,通过“私密浏览”模式,并生成适当的警告。)

这种自律在制作直接调试的应用程序方面已经多次得到了回报。

我们在创建时简单地“推出了自己的”逻辑。