События Jquery не работают должным образом с AngularJS

Question

События Jquery не работают должным образом с AngularJS

0

У меня есть простой код меню с AngularJS. Когда документ загружается, я отправляю массив для подготовки меню. В этой последовательности я также записал событие click в это сгенерированное меню. Но это не срабатывает, если обработчик щелчка до подготовки меню.

Когда я изменяю последовательность событий нажатия на после того, как меню подготовить это работает отлично.

Рабочую последовательность я упомянул в комментариях нижеприведенного кода.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="MenuStyle.css">



<title>Welcome</title>

</head>

<body ng-app="myApp" ng-controller="myCtrl">

    <div id='cssmenu' >
        <ul>
            <li ng-repeat="menus in menuList track by $index" ng-init="Index = $index" class='active has-sub open clickthis'>
                <a><span>{{menus.mainmenu}}</span></a>
                <ul>
                    <li ng-repeat="sub in menus.submenu" class='last'><a>{{sub}}</a></li>
                </ul>
            </li>
        </ul>
    </div>

</bodY>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {


    $(document).ready(function(){

        //Why this not handle the click event
        //If i create the li by dynamically using jquery this will handle the click event.
        //But Angular generated li does not handles.
        //What is the reason.
        $(".clickthis").click(function(){alert('hai');});

        $scope.menuList=    [
        {mainmenu:'main1',submenu:['sub1','sub2']},
        {mainmenu:'main2',submenu:['sub1','sub2','sub3']},
        {mainmenu:'main3',submenu:['sub1','sub2','sub3','sub4']},
        {mainmenu:'main4',submenu:['sub1','sub2']}                          
        ];  
        $scope.$apply();
        $('#cssmenu li>ul').slideDown();


        //Why the below line handle the click event
        //What is the difference between above line and below line.
        //$(".clickthis").click(function(){alert('hai');});

    });
});
</script>
</html>

В чем причина или логика этого. Пожалуйста, дайте ясность по этому вопросу.

teja 02 июль 2015, в 07:27

Источник

Теги:

javascript

jquery

angularjs

2 ответа

2

Почему это не обрабатывает событие click

Потому что Угловая еще ничего не сделала. Другими словами, вы пытаетесь связать событие, прежде чем DOM будет доступен для этого.

Конечно, вы можете играть с расписанием времени/сценарием и т.д., Но это все просто неуклюжие трудовые ресурсы. Правильный способ настройки настроек - избегать использования jQuery, как они используются, и использовать специальные инструменты. Угловой обеспечивает: в вашем случае ngClick ditrective.

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {

    $scope.manuClick = function(item) {
        alert(item.mainmenu);
    };

    $scope.menuList = [{
        mainmenu: 'main1',
        submenu: ['sub1', 'sub2']
    }, {
        mainmenu: 'main2',
        submenu: ['sub1', 'sub2', 'sub3']
    }, {
        mainmenu: 'main3',
        submenu: ['sub1', 'sub2', 'sub3', 'sub4']
    }, {
        mainmenu: 'main4',
        submenu: ['sub1', 'sub2']
    }];

});

с HTML:

<div id='cssmenu' >
    <ul>
        <li class='active has-sub open clickthis'
            ng-repeat="menus in menuList track by $index" 
            ng-init="Index = $index" 
            ng-click="menuClick(menus)">
            <a><span>{{menus.mainmenu}}</span></a>
            <ul>
                <li ng-repeat="sub in menus.submenu" class='last'><a>{{sub}}</a></li>
            </ul>
        </li>
    </ul>
</div>

Также убедитесь, что вы полностью понимаете, что означает "Мышление в AngularJS", если у меня есть фон jQuery?

dfsq 02 июль 2015, в 02:44

Ещё вопросы

hubot · Accepted Answer · 2015-07-02T03-28-00.000Z

https://jsfiddle.net/j4wfmq2o/

$ (document).on("click", ". clickthis", function() {alert ("Это будет работать, потому что вы привязываете Eventhandler на уровне Document до того, как DOM отобразит Menu/submenu.");});

 var app= angular.module('myApp',[]);
app.controller('myCtrl', function($scope) {
   
    $(document).on("click",".clickthis",function() {
        alert("THis will work Because you are binding Eventhandler at Document level before DOM renders Menu/submenu.No Need to put document ready..");
    });
    
     $(".clickthis").click(function(){alert('hai... THis will not work because DOM for menu is not ready yet. ');});
    

    $scope.menuList=    [
        {mainmenu:'main1',submenu:['sub1','sub2']},
        {mainmenu:'main2',submenu:['sub1','sub2','sub3']},
        {mainmenu:'main3',submenu:['sub1','sub2','sub3','sub4']},
        {mainmenu:'main4',submenu:['sub1','sub2']}                          
        ];  
        $scope.$apply();
        $('#cssmenu li>ul').slideDown();
  

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>

<div ng-app="myApp">
<div ng-controller='myCtrl'>
 
     <div id='cssmenu' >
        <ul>
            <li ng-repeat="menus in menuList track by $index" ng-init="Index = $index" class='active has-sub open clickthis'>
                <a><span>{{menus.mainmenu}}</span></a>
                <ul>
                    <li ng-repeat="sub in menus.submenu" class='last'><a>{{sub}}</a></li>
                </ul>
            </li>
        </ul>
    </div>
    
    
</div>
</div>

Я согласен с ответом dsfq .. Избегайте jQuery с угловым .... используйте ngClick