>  기사  >  php教程  >  객체를 반환하는 Anglejs 모듈의 함정에 대한 간략한 토론

객체를 반환하는 Anglejs 모듈의 함정에 대한 간략한 토론

高洛峰
高洛峰원래의
2016-12-09 14:07:351292검색

모듈의 서로 다른 구성 요소를 서로 다른 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=[
                           &#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);

이것을 동시에 로드하면 앞서 언급한 app.js와 menuController.js 또는 app.js와 menu.js를 각각 로드해도 문제가 발생하지 않습니다.

하지만 문제의 원인을 알고 나면 문제를 해결할 수 있습니다. 반환된 앱 개체를 전역 변수에 적용하면 각 js가 이 전역 변수가 존재하는지 판단합니다. 이 변수. 그렇지 않으면 모듈을 통해 얻으십시오.

app.js

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

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

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


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.