这个标签有什么作用？

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 "文章它是如何做，这将是更容易让你找出它是如何工作（如果以这种方式注册...）