這個標籤有什麼作用？

Question

我一直在學習如何閱讀其他人的代碼，當我看到類似這樣的東西<meganav-item item="item" ng-repeat="item in website.nav.primary"></meganav-item>我卡住了。

我對角度有基本的瞭解，但問題是<meganav>標籤。我不知道這是什麼..我做了一個谷歌搜索，但沒有任何有用的顯示。

更新

我設法找到<meganav>元素的文件。按照你們提供的鏈接的指示，它引導我一個名爲「MegaNavItem.js」的文件。這裏是代碼：

window.tcoStore.directive('meganavItem', ['$timeout','transport', function($timeout,transport) { 
    var lockTimeout = false; 
    var meganavLocks = transport.getModel('meganavLocks', {lock : false}); 
    var clear = function(){ 
     if(meganavLocks.timeout){ 
      $timeout.cancel(meganavLocks.timeout); 
     } 
    } 
    var action = function(callback, time) { 
     if(meganavLocks.lock){ 
      return; 
     } 
     clear(); 
     meganavLocks.timeout = $timeout(callback, time); 
    } 
    var dropLock = function(callback, time) { 
     meganavLocks.lock = false; 
    } 
    return { 
     restrict : 'E', 
     replace: true, 
     templateUrl : '/page/header/meganav/item.html', 
     scope : { 
      item : '=', 
      clickOnly : '@', 
      delayIn : '@', 
      delayOut : '@' 
     }, 
     link : function($scope, elem, attrs){ 
      if(!$scope.clickOnly){ 
       $scope.delayInValue = parseInt($scope.delayIn || 300,10); 
       $scope.delayOutValue = parseInt($scope.delayOut || 500,10); 

       elem.on('mouseenter', $scope.showDelayed); 
       if($scope.delayOutValue > 0){ 
        elem.on('mouseleave', $scope.hideDelayed); 
       } 
      } 
     }, 
     controller: ['$scope', '$timeout', 'transport', '$location' , 
      function($scope, $timeout, transport,$location) { 

      // When $location changes ... 
      $scope.$on('$locationChangeSuccess', function() { 
       $scope.hide(true); 

       $scope.isActive = !_.isUndefined($scope.item.link) && ($scope.item.link.replace(/\/+$/,'') == $location.path().replace(/\/+$/,'')); 
      }); 

      $scope.loadSubmenu =0; 

      // tranposrt model accessable by other items 
      var meganavVisibleModel = transport.getModel('meganavActive'); 
      var meganavVisibleModelId = $scope.item.$$hashKey; 
      meganavVisibleModel[meganavVisibleModelId] = false; 

      // hide and show funs 
      $scope.hide = function(forceFullClose){ 
       clear(); 
       meganavVisibleModel[meganavVisibleModelId] = false; 
       if(forceFullClose) { 
        meganavLocks.lock = true; 
        $timeout.cancel(lockTimeout); 
        lockTimeout = $timeout(dropLock, 1000); 
       } 
      }; 


      $scope.hideDelayed = function (delay) { 
       action($scope.hide, _.isNumber(delay) ? delay : $scope.delayOutValue); 
      }; 

      $scope.show = function(){ 
       if(meganavLocks.lock){ 
        return; 
       } 
       clear(); 
       $scope.loadSubmenu = 1; 
       for(var i in meganavVisibleModel){ 
        meganavVisibleModel[i] = (meganavVisibleModelId == i); 
       } 
      }; 

      $scope.showDelayed = function (delay) { 
       action($scope.show, _.isNumber(delay) ? delay : $scope.delayInValue); 
      }; 

      $scope.$watch(function(){ 
       $scope.visible = meganavVisibleModel[meganavVisibleModelId]; 
      }); 


      // first touch click, second touch go to link 
      $scope.touch = function($event, path){ 
       if(!$scope.visible) { 
        //$event.preventDefault(); 
        $scope.show(); 
       }else if(tco.empty(path)) { 
        $scope.hide(); 
       } else { 
        if(path.match(/^https?:/)){ 
         window.location.href = path; 
        }else{ 
         $location.path(path); 
        } 
       } 
      } 

     }] 
    } 
}]); 

而這個文件導致我另一個文件命名爲item.html。代碼：

<li class="header--menu__item my-repeat-animation" ng-class="{ 'is-active': isActive, open : visible && item.groups.length}" off-click="hide()" > 
    <a ng-if=":: item.groups.length" 
     ng-class="{active: item.active}" 
     class="header--menu__item--link has-children" 
     ng-click="show()" 
     title="{{::item.name}}"> 
     {{::item.name}} 
    </a> 
    <a ng-if=":: !item.groups.length" 
     class="header--menu__item--link" 
     href="{{::item.link}}" 
     title="{{::item.name}}"> 
     {{::item.name}} 
    </a> 

    <div class="header-menu-dropdown ng-hide" ng-show="visible" ng-if=":: item.groups.length"> 
     <ul class="header-menu-dropdown__meganavGroup"> 
      <li ng-repeat="meganavGroup in item.groups" class="header--menu-group"> 
       <span class="meganav--group--name">{{::meganavGroup.name}}</span> 
       <ul class="meganav--group--items"> 
        <li ng-repeat="groupItem in meganavGroup.items"> 
         <a href="{{::groupItem.link}}">{{::groupItem.name}}</a> 
         <span class="icon"></span> 
        </li> 
       </ul> 
      </li> 

      <li class="header-menu-offers" ng-repeat="offer in item.offers"> 
       <a href="{{::offer.offer_link}}" class="placeholder"> 
        <img tco-image="offer.offer_image" crop="3" alt="{{::offer.offer_name}}" /> 
       </a> 
       <span class="offer-name">{{::offer.offer_name}}</span> 
      </li> 
     </ul> 
     <div class="header-menu-message" ng-bind-html="item.message"></div> 
    </div> 
</li> 

我現在的問題是，我不能做什麼在哪裏可以找到{{:: item.name}}，這是我想改變的東西。我可以使用什麼技術來查找{{:: item.name}}？

對不起所有noob問題！非常感謝您的幫助！

Answer 1

在Angular中可以構建自己的HTML元素。您不會找到有關此元素的任何信息，因爲它不存在。開發人員自行創建並處理模塊內的內容。有關更多信息，請參閱http://www.aleaiactaest.ch/2012/07/29/build-your-own-html-element-with-angular/。

希望這有助於乾杯。

Answer 2

，因爲我已經注意到了這一點是角應用程序，所以可能有被定義的指令被稱爲meganavItem。有關更多信息，請參閱Angular Directive，您必須找到該指令的定義，並發現<meganav-item>下的html佈局和邏輯生命。但是，如果沒有指定名稱的指令。

此外，它可以是獨立註冊的元素，見"Custom Elements "文章它是如何做，這將是更容易讓你找出它是如何工作（如果以這種方式註冊...）