当前位置：首页 > 资讯 > 技术文档

浅谈angularjs module返回对象的坑(推荐)

时间：2022-10-25 22:02 编辑：来源：阅读：
扫一扫，手机访问

摘要：浅谈angularjs module返回对象的坑(推荐)

通过将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变量所指向的对象不再是我们注册的那个。 [b]也就是如果像下面这样写就会有问题：[/b] [b]app.js[/b]

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

[b]menuController.js[/b]

(function(angular){
  angular.module('app.main', []);
  .controller('MenuController',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);

[b]menu.js[/b]

(function(angular){
 if(!app)
   app={};
  if(!app.main)
 angular.module('app.main', []);
    .directive('menu', function($compile) {
   return {
     restrict: 'A',
     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='';
        var subLi='';

        if(item.main){
         sub=[
            '<a href="'+item.url+'" class="home-icon">',
            '<span class="glyphicon glyphicon-home" aria-hidden="true"></span>',
              item.name,
             '</a>'
           ].join('');
        }else if(item.history){
         sub=[
            '<a href="'+item.url+'" class="sub-icon">',
           '<span class="glyphicon glyphicon-home glyphicon-hourglass" aria-hidden="true"></span>',
              item.name,
             '</a>'
           ].join('');
        }else if(item.sub){
         sub=[
            '<a href="#" class="menu1" ng-click="displaySwitch('+item.index+')">',
            '<span class="glyphicon glyphicon-film" aria-hidden="true"></span>',
              item.name,
              '<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>',
             '</a>'
           ].join('');
         subLi='<ul class="cl-effect-2" ng-show="menu['+item.index+'].isShow">';
         for(var i=0;i<item.sub.length;i++){
          subLi=subLi+['<li>',
                 '<a href="'+item.sub[i].url+'">',
                 item.sub[i].name,
                 '</a>',
                 '</li>'
          ].join('');
         }
         subLi=subLi+'</ul>';
        }else{
         sub=[
            '<a href="'+item.url+'" class="sub-icon">',
            '<span class="glyphicon glyphicon-film" aria-hidden="true"></span>',
              item.name,
             '</a>'
           ].join('');
        }
        tableRow = tableRow+['<li ',
                   item.main ? 'class="active"' : '',
                   '>',
                   sub,
                   '</li>',
                   subLi
        ].join('');
       });
       
       $elem[0].innerHTML = tableRow;
       $compile($elem.contents())($scope);
       
       });

     }
   };
 });
})(window.angular);

如果同时加载这三个js就会存在之前说的问题，分别加载app.js和menuController.js或者app.js和menu.js就不会存在问题。不过知道问题的原因后就好解决问题了，把返回的app对象的应用给到全局变量，每个js判断是不是存在这个全局变量，如果存在，则用该变量。否则再通过module进行获得。 [b]app.js[/b]

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

[b]menuController.js[/b]

(function(angular){
 
 if(!app)
   app={};
  if(!app.main)
  app.main=angular.module('app.main', []);
  app.main.controller('MenuController',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);

[b]menu.js[/b]

(function(angular){
 if(!app)
   app={};
  if(!app.main)
  app.main=angular.module('app.main', []);
  app.main.directive('menu', function($compile) {
   return {
     restrict: 'A',
     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='';
        var subLi='';

        if(item.main){
         sub=[
            '<a href="'+item.url+'" class="home-icon">',
            '<span class="glyphicon glyphicon-home" aria-hidden="true"></span>',
              item.name,
             '</a>'
           ].join('');
        }else if(item.history){
         sub=[
            '<a href="'+item.url+'" class="sub-icon">',
           '<span class="glyphicon glyphicon-home glyphicon-hourglass" aria-hidden="true"></span>',
              item.name,
             '</a>'
           ].join('');
        }else if(item.sub){
         sub=[
            '<a href="#" class="menu1" ng-click="displaySwitch('+item.index+')">',
            '<span class="glyphicon glyphicon-film" aria-hidden="true"></span>',
              item.name,
              '<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>',
             '</a>'
           ].join('');
         subLi='<ul class="cl-effect-2" ng-show="menu['+item.index+'].isShow">';
         for(var i=0;i<item.sub.length;i++){
          subLi=subLi+['<li>',
                 '<a href="'+item.sub[i].url+'">',
                 item.sub[i].name,
                 '</a>',
                 '</li>'
          ].join('');
         }
         subLi=subLi+'</ul>';
        }else{
         sub=[
            '<a href="'+item.url+'" class="sub-icon">',
            '<span class="glyphicon glyphicon-film" aria-hidden="true"></span>',
              item.name,
             '</a>'
           ].join('');
        }
        tableRow = tableRow+['<li ',
                   item.main ? 'class="active"' : '',
                   '>',
                   sub,
                   '</li>',
                   subLi
        ].join('');
       });
       
       $elem[0].innerHTML = tableRow;
       $compile($elem.contents())($scope);
       
       });

     }
   };
 });
})(window.angular);

以上就是小编为大家带来的浅谈angularjs module返回对象的坑(推荐)全部内容了，希望大家多多支持编程素材网~

全部评论(0)

上一篇：python解析基于xml格式的日志文件
下一篇：解决PhpMyAdmin中导入2M以上大文件限制的方法分享

资讯排行榜
更多>>