모듈의 서로 다른 구성 요소를 서로 다른 js 파일로 분할하여 조립하는 동안 모듈에서 이상한 문제를 발견했습니다. AngularJS의 버그인지 궁금합니다. 지금까지 설명이 발견되지 않았습니다.
문제는 이것이다. 이해에 따르면, angle.module('app.main', [])은 app.main 네임스페이스에서 앱 객체를 반환하는 것과 같습니다. 그러면 어떤 js 파일에 있든 이 메서드를 통해 얻은 앱 변수에 저장된 포인터는 유일한 힙 메모리를 가리켜야 하며 앱 개체는 이 메모리에 저장됩니다. 모듈의 js 파일, 컨트롤러의 js 파일 및 서비스의 js 파일에서는 이러한 작업에 실제로 문제가 없습니다. 그들은 동일한 개체입니다. 그러나 지시문을 추가하면 모듈이 앱 개체를 등록하지 않았습니다. 왜 등록되지 않습니까? 반환된 앱 변수가 가리키는 개체가 더 이상 우리가 등록한 개체가 아니라는 결론이 나옵니다.
즉, 이렇게 쓰면 문제가 발생합니다:
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);
이것을 동시에 로드하면 앞서 언급한 app.js와 menuController.js 또는 app.js와 menu.js를 각각 로드해도 문제가 발생하지 않습니다.
하지만 문제의 원인을 알고 나면 문제를 해결할 수 있습니다. 반환된 앱 개체를 전역 변수에 적용하면 각 js가 이 전역 변수가 존재하는지 판단합니다. 이 변수. 그렇지 않으면 모듈을 통해 얻으십시오.
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);