Question

大家好我刚接触到jquery和angularjs（已经在.net应用程序中进行了jquery验证，但没有太多exp，所以请耐心等待我）我希望我的jquery代码在我的控制器类下面的角度js之后最后运行我需要的是在悬停时我必须显示子菜单（这是通过jquery完成的）我试过这个＆＃34; viewContentLoaded＆＃34;但仍然没有运气 jquery函数在就绪时调用，但在我的控制器数据

之前首先调用它

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

Answer 1

正如您所发现的，在Angular完成向DOM添加元素之前，jQuery正在附加hover事件处理程序。使用jQuery.on()在DOM上方附加一个事件处理程序，通过传播来监听mouseover上mouseout和.item-destinations个事件......

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

还要考虑在angular指令中封装此行为。

最后用angularjs加载jquery

1 个答案: