У меня есть простой код меню с AngularJS. Когда документ загружается, я отправляю массив для подготовки меню. В этой последовательности я также записал событие click в это сгенерированное меню. Но это не срабатывает, если обработчик щелчка до подготовки меню.
Когда я изменяю последовательность событий нажатия на после того, как меню подготовить это работает отлично.
Рабочую последовательность я упомянул в комментариях нижеприведенного кода.
<!DOCTYPE html>
<html>
<head>
<script src="/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>
В чем причина или логика этого. Пожалуйста, дайте ясность по этому вопросу.
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="/jquery.min.js"></script>
<script src="/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>
Почему это не обрабатывает событие 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?