current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Hi all iam new to jquery and angularjs(have done jquery for validations in .net apps but not much exp so please bear with me) i want my jquery code to run at last after angular js below is my controller class what i need is on hover i have to show the submenu (this is done through jquery) i tried with this "viewContentLoaded" but still no luck jquery function is called on ready but its laoding first before my controller data

var MenuCtrl = ['$scope', '$rootScope', '$filter', '$location', '$route', 'Data', function ($scope, $rootScope, $filter, $location, $route, Data) {

    $scope.menu = Data;

    $scope.selected = 0;
    $scope.setSelected = function (index) {

        $scope.selected = index;
    };

    $scope.$on('$viewContentLoaded', function () {
        alert('loaded');
    });

}];

**My HTML -Angular**
 <section ng-repeat="m in menu track by $index">
                    <section class="item">
                         <div class="item-destinations" ">
                            <a ng-href="{{m.PageURL}}">{{m.Title}}-{{$index}}</a>
                        </div>
                    </section>

**My jquery**

$('.item-destinations').hover(
        function (e) {
            e.stopPropagation();
            $('.navExpand').stop().animate({
                top: "63"
            }, 300, function () {
                destMenuOpen = true;
            });
        },
        function (e) {
            e.stopPropagation();
        }
    );
share|improve this question

1 Answer 1

up vote 0 down vote accepted

As you have discovered, jQuery is attaching the hover event handler before Angular is done adding the elements to the DOM. Use jQuery.on() to attach an event handler further up the DOM to listen for the mouseover and mouseout events on .item-destinations via propagation...

$(document).on({
    mouseenter: function (e) {
        e.stopPropagation();
        $('.navExpand').stop().animate({
            top: "63"
        }, 300, function () {
            destMenuOpen = true;
        });
    },
    mouseleave: function (e) {
        e.stopPropagation();
    }
}, '.item-destinations');

Also consider encapsulating this behavior in an angular directive.

share|improve this answer
    
Hi Anthony, Thanks for your answer i will include it in directive –  user3476088 Apr 16 at 4:58

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.