Javascript Jquery事件不能与AngularJS正常工作_Javascript_Jquery_Angularjs

Javascript Jquery事件不能与AngularJS正常工作

javascript jquery angularjs

Javascript Jquery事件不能与AngularJS正常工作,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我有一个简单的菜单代码与AngularJS。加载文档时，我会发送一个数组来准备菜单。在这个序列中，我还将click事件写到了生成的菜单中。但如果在准备菜单之前单击处理程序，则不会触发当我将单击事件的顺序更改为“在菜单准备好后”时，它会正常工作我在下面代码的注释中提到的工作顺序 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/

我有一个简单的菜单代码与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>


欢迎


{{menus.mainmenu}}

{{sub}



var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$（文档）.ready（函数（）{
//为什么不处理单击事件
//如果我使用jquery动态创建li，这将处理click事件。
//但角度生成的li不处理。
//原因是什么。
$（“.clickthis”）。单击（函数（）{alert（'hai'）；}）；
$scope.menuList=[
{main菜单：'main1'，子菜单：['sub1'，'sub2']}，
{主菜单：'main2'，子菜单：['sub1'，'sub2'，'sub3']}，
{主菜单：'main3'，子菜单：['sub1'，'sub2'，'sub3'，'sub4']}，
{main菜单：'main4'，子菜单：['sub1'，'sub2']}
];  
$scope.$apply（）；
$（'cssmenu li>ul'）.slideDown（）；
//为什么下面的行处理单击事件
//线上和线下的区别是什么。
//$（“.clickthis”）。单击（函数（）{alert（'hai'）；}）；
});
});

这背后的原因或逻辑是什么。请澄清这一点。

$（文档）。在（“单击“，”。单击此”，函数（）{ 警报（“这将起作用，因为您在DOM呈现菜单/子菜单之前在文档级别绑定Eventhandler。”）； });

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$（文档）。在（“单击“，”。单击此”，函数（）{
警报（“这将起作用，因为您在DOM呈现菜单/子菜单之前在文档级别绑定Eventhandler。无需将文档准备就绪…”）；
});
$（“.clickthis”）。单击（函数（）{alert（'hai…这将不起作用，因为菜单的DOM尚未准备就绪。”）；}）；
$scope.menuList=[
{main菜单：'main1'，子菜单：['sub1'，'sub2']}，
{主菜单：'main2'，子菜单：['sub1'，'sub2'，'sub3']}，
{主菜单：'main3'，子菜单：['sub1'，'sub2'，'sub3'，'sub4']}，
{main菜单：'main4'，子菜单：['sub1'，'sub2']}
];  
$scope.$apply（）；
$（'cssmenu li>ul'）.slideDown（）；
}); 



{{menus.mainmenu}}

{{sub}




为什么不处理单击事件
因为Angular还没有渲染任何东西。换句话说，您正在尝试在DOM可用之前绑定事件
当然，您可以使用计时/脚本放置等，但这些都只是笨拙的变通方法。正确的设置方法是避免按使用方式使用jQuery，并使用Angular提供的专用工具：在您的情况下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>




可能存在的副本