淺談angularjs module返回對象的坑(推薦)_AngularJS

通過將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('app.main',['app.login']);})(window.angular);

menuController.js

(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);

menu.js

(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進行獲得。

app.js

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

menuController.js

(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);

menu.js

(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返回對象的坑(推薦)全部內容了，希望大家多多支援雲棲社區~