这个标签有什么作用？

Question

I have been learning how to read other people's code and when ever I see something like this <meganav-item item="item" ng-repeat="item in website.nav.primary"></meganav-item> I get stuck.

I have a basic understand of angular, but the problem is the <meganav> tag. I do not know what this is..I have done a Google search, but nothing useful is showing.

Update

I have managed to locate the file of the <meganav> element. After following the instructions from the links that you guys have provided, it led me to a file named "MegaNavItem.js". Here is the code:

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

        }]
    }
}]);

And this file led me to another file named item.html. The code :

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

My issue is now that I cannot make out what where to find {{::item.name}}, which is the thing that I want to change. What technique can I use to find {{::item.name}}?

Sorry for all the noob questions! Your help is much appreciated!

Answer 1

In Angular it is possible to build your own HTML element. You won't find any information about this element because it doesn't exist. The developer has created that on its own and handles the content inside a module. Have a look at http://www.aleaiactaest.ch/2012/07/29/build-your-own-html-element-with-angular/ for more information.

Hope this helps, Cheers.

Answer 2

As i've noticed it's Angular App, so probably there are defined an directive which is called meganavItem . See Angular Directive for more information, you have to find definition of that directive and discover what is html layout and logic lives under <meganav-item> . However if there are no directive with defined name.

Also it may be separate registered element, see "Custom Elements " article of how it's done and it would be more easy for you to find out how it works ( if it registered in that way...)