浅谈angularjs module返回对象的坑-PHP开发-php.cn

浅谈angularjs module返回对象的坑

高洛峰

Libérer： 2016-12-09 14:07:35

original

1323 Les gens l'ont consulté

通过将module中不同的部件拆分到不同的js文件中，在组装的时候发现module存在一个奇怪的问题，不知道是不是AngularJS的bug。至今没有找到解释。

问题是这样的，按照理解，angular.module('app.main', []);这样一句话相当于从app.main命名空间返回出一个app对象。那么，不论在任何js文件中，我通过该方法获得的app变量所储存的指针都应该指向唯一的一个堆内存，而这个内存中存储的就是这个app对象。这种操作在module的js文件，和controller的js文件，service的js文件中确实是没有问题的，是同一个对象。但是再加入directive的时候，这个app对象居然没有被module注册。为什么没有被注册，结论自然是返回的这个app变量所指向的对象不再是我们注册的那个。

也就是如果像下面这样写就会有问题：

app.js

(function(angular){
    angular.module(&#39;app.main&#39;,
        [&#39;app.login&#39;]
    );
})(window.angular);

Copier après la connexion

menuController.js

(function(angular){
  angular.module(&#39;app.main&#39;, []);
  .controller(&#39;MenuController&#39;,function($scope,menuService,userService){
    var loginname=Cookies.getCookieValue("loginname");
    var token=Cookies.getCookieValue("token");
        Cookies.delCookieValue("token");
        Cookies.delCookieValue("loginname");
    alert(userService.getToken());
    $scope.menu=[];
     
    menuService.initMenu(loginname,token,function(menu){
        $scope.menu=menu;
        $scope.$broadcast("menuLoaded");
    });
     
        $scope.displaySwitch=function(index){
        if($scope.menu[index].isShow)
            $scope.menu[index].isShow=false;
        else
            $scope.menu[index].isShow=true;
    };
     
    });
   
})(window.angular);

Copier après la connexion

menu.js

(function(angular){
    if(!app)
    app={};
  if(!app.main)
    angular.module(&#39;app.main&#39;, []);
    .directive(&#39;menu&#39;, function($compile) {
      return {
        restrict: &#39;A&#39;,
        replace: false,
        priority: 999,
        link: function ($scope, $elem, attrs) {
 
            $scope.$on("menuLoaded", function (event, args) {
             
                var tableRow = "";
                 
                angular.forEach($scope.menu, function (item) {
                    var sub=&#39;&#39;;
                    var subLi=&#39;&#39;;
 
                    if(item.main){
                        sub=[
                           &#39;<a href="&#39;+item.url+&#39;" class="home-icon">&#39;,
                           &#39;<span class="glyphicon glyphicon-home" aria-hidden="true"></span>&#39;,
                       item.name,
                         &#39;</a>&#39;
                          ].join(&#39;&#39;);
                    }else if(item.history){
                        sub=[
                           &#39;<a href="&#39;+item.url+&#39;" class="sub-icon">&#39;,
                             &#39;<span class="glyphicon glyphicon-home glyphicon-hourglass" aria-hidden="true"></span>&#39;,
                       item.name,
                         &#39;</a>&#39;
                          ].join(&#39;&#39;);
                    }else if(item.sub){
                        sub=[
                           &#39;<a href="#" class="menu1" ng-click="displaySwitch(&#39;+item.index+&#39;)">&#39;,
                           &#39;<span class="glyphicon glyphicon-film" aria-hidden="true"></span>&#39;,
                       item.name,
                       &#39;<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>&#39;,
                         &#39;</a>&#39;
                          ].join(&#39;&#39;);
                        subLi=&#39;<ul class="cl-effect-2" ng-show="menu[&#39;+item.index+&#39;].isShow">&#39;;
                        for(var i=0;i<item.sub.length;i++){
                            subLi=subLi+[&#39;<li>&#39;,
                                   &#39;<a href="&#39;+item.sub[i].url+&#39;">&#39;,
                                   item.sub[i].name,
                                   &#39;</a>&#39;,
                                   &#39;</li>&#39;
                            ].join(&#39;&#39;);
                        }
                        subLi=subLi+&#39;</ul>&#39;;
                    }else{
                        sub=[
                           &#39;<a href="&#39;+item.url+&#39;" class="sub-icon">&#39;,
                           &#39;<span class="glyphicon glyphicon-film" aria-hidden="true"></span>&#39;,
                       item.name,
                         &#39;</a>&#39;
                          ].join(&#39;&#39;);
                    }
                    tableRow = tableRow+[&#39;<li &#39;,
                               item.main ? &#39;class="active"&#39; : &#39;&#39;,
                               &#39;>&#39;,
                               sub,
                               &#39;</li>&#39;,
                               subLi
                    ].join(&#39;&#39;);
                });
                 
                $elem[0].innerHTML = tableRow;
                $compile($elem.contents())($scope);
                 
          });
 
        }
      };
    });
})(window.angular);

Copier après la connexion

如果同时加载这三个js就会存在之前说的问题，分别加载app.js和menuController.js或者app.js和menu.js就不会存在问题。

不过知道问题的原因后就好解决问题了，把返回的app对象的应用给到全局变量，每个js判断是不是存在这个全局变量，如果存在，则用该变量。否则再通过module进行获得。

app.js

(function(angular){
    app={};
    app.main=angular.module(&#39;app.main&#39;,
        [&#39;app.login&#39;]
    );
})(window.angular);

Copier après la connexion

menuController.js

(function(angular){
     
    if(!app)
    app={};
  if(!app.main)
        app.main=angular.module(&#39;app.main&#39;, []);
  app.main.controller(&#39;MenuController&#39;,function($scope,menuService,userService){
    var loginname=Cookies.getCookieValue("loginname");
    var token=Cookies.getCookieValue("token");
        Cookies.delCookieValue("token");
        Cookies.delCookieValue("loginname");
    alert(userService.getToken());
    $scope.menu=[];
     
    menuService.initMenu(loginname,token,function(menu){
        $scope.menu=menu;
        $scope.$broadcast("menuLoaded");
    });
     
        $scope.displaySwitch=function(index){
        if($scope.menu[index].isShow)
            $scope.menu[index].isShow=false;
        else
            $scope.menu[index].isShow=true;
    };
     
    });
   
})(window.angular);

Copier après la connexion

menu.js

(function(angular){
    if(!app)
    app={};
  if(!app.main)
        app.main=angular.module(&#39;app.main&#39;, []);
  app.main.directive(&#39;menu&#39;, function($compile) {
      return {
        restrict: &#39;A&#39;,
        replace: false,
        priority: 999,
         
        link: function ($scope, $elem, attrs) {
 
            $scope.$on("menuLoaded", function (event, args) {
             
                var tableRow = "";
                 
                angular.forEach($scope.menu, function (item) {
                    var sub=&#39;&#39;;
                    var subLi=&#39;&#39;;
 
                    if(item.main){
                        sub=[
                           &#39;<a href="&#39;+item.url+&#39;" class="home-icon">&#39;,
                           &#39;<span class="glyphicon glyphicon-home" aria-hidden="true"></span>&#39;,
                       item.name,
                         &#39;</a>&#39;
                          ].join(&#39;&#39;);
                    }else if(item.history){
                        sub=[
                           &#39;<a href="&#39;+item.url+&#39;" class="sub-icon">&#39;,
                             &#39;<span class="glyphicon glyphicon-home glyphicon-hourglass" aria-hidden="true"></span>&#39;,
                       item.name,
                         &#39;</a>&#39;
                          ].join(&#39;&#39;);
                    }else if(item.sub){
                        sub=[
                           &#39;<a href="#" class="menu1" ng-click="displaySwitch(&#39;+item.index+&#39;)">&#39;,
                           &#39;<span class="glyphicon glyphicon-film" aria-hidden="true"></span>&#39;,
                       item.name,
                       &#39;<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>&#39;,
                         &#39;</a>&#39;
                          ].join(&#39;&#39;);
                        subLi=&#39;<ul class="cl-effect-2" ng-show="menu[&#39;+item.index+&#39;].isShow">&#39;;
                        for(var i=0;i<item.sub.length;i++){
                            subLi=subLi+[&#39;<li>&#39;,
                                   &#39;<a href="&#39;+item.sub[i].url+&#39;">&#39;,
                                   item.sub[i].name,
                                   &#39;</a>&#39;,
                                   &#39;</li>&#39;
                            ].join(&#39;&#39;);
                        }
                        subLi=subLi+&#39;</ul>&#39;;
                    }else{
                        sub=[
                           &#39;<a href="&#39;+item.url+&#39;" class="sub-icon">&#39;,
                           &#39;<span class="glyphicon glyphicon-film" aria-hidden="true"></span>&#39;,
                       item.name,
                         &#39;</a>&#39;
                          ].join(&#39;&#39;);
                    }
                    tableRow = tableRow+[&#39;<li &#39;,
                               item.main ? &#39;class="active"&#39; : &#39;&#39;,
                               &#39;>&#39;,
                               sub,
                               &#39;</li>&#39;,
                               subLi
                    ].join(&#39;&#39;);
                });
                 
                $elem[0].innerHTML = tableRow;
                $compile($elem.contents())($scope);
                 
          });
 
        }
      };
    });
})(window.angular);

Copier après la connexion