Question

我一直在学习如何阅读其他人的代码，当我看到类似这样的内容<meganav-item item="item" ng-repeat="item in website.nav.primary"></meganav-item>时，我会陷入困境。

我对angular有基本的了解，但问题是<meganav>标记。我不知道这是什么..我已经完成了Google搜索，但没有任何用处。

更新

我已设法找到<meganav>元素的文件。按照你们提供的链接的说明，它引导我到一个名为＆＃34; MegaNavItem.js＆＃34;的文件。这是代码：

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}}？

对不起所有的菜鸟问题！非常感谢您的帮助！

Answer 1

在Angular中，可以构建自己的HTML元素。您无法找到有关此元素的任何信息，因为它不存在。开发人员自己创建了它并处理模块内的内容。有关详细信息，请查看http://www.aleaiactaest.ch/2012/07/29/build-your-own-html-element-with-angular/。

希望这有帮助，干杯。

Answer 2

正如我已经注意到它是 Angular 应用程序，所以可能已经定义了一个名为meganavItem的指令。有关详细信息，请参阅Angular Directive，您必须找到该指令的定义并发现<meganav-item>下的html布局和逻辑是什么。但是，如果没有定义名称的指令。

此外，它可能是单独的注册元素，请参阅"Custom Elements "文章，了解它是如何完成的，并且您将更容易找到它是如何工作的（如果它以这种方式注册...）

这个标签做什么？

2 个答案: