Jquery事件與Angular js無法正常工作

我有一個簡單的帶有角度js的菜單代碼。當文件加載時，我發送一個數組來準備菜單。在這個順序中，我還將點擊事件寫入了生成的菜單。但是如果菜單準備之前的點擊處理程序不會觸發。Jquery事件與Angular js無法正常工作

當我改變點擊事件的順序後，菜單準備工作完美。

我在下面的代碼的評論中提到的工作順序。

<!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 angulr 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>

這是什麼原因或邏輯。請說清楚這一點。

來源

2015-07-02 teja

可能重複http://stackoverflow.com/問題/ 22714286/call-jquery-function-from-angularjs-controller） –

https://jsfiddle.net/j4wfmq2o/

的$（document）。在（「點擊」，「clickthis」，函數（）{ 警報（「本會的工作，因爲你是在文檔級結合事件處理DOM渲染菜單前/子菜單。「）; }）;

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>

來源

2015-07-02 05:42:04 hubot

我同意dsfq的回答..避免jQuery與角度....使用ngClick – hubot

由於角還未呈現什麼，爲什麼這不是處理click事件

。換句話說，在DOM可用於此之前，您正試圖綁定事件。

當然，你可以玩時間/腳本放置等，但這一切只是笨拙的workaronds。設置東西的正確方法是避免使用jQuery，他們使用方式，並使用Angular提供的專用工具：在你的情況下，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>

另外，還要確保你完全明白它的意思"Thinking in AngularJS" if I have a jQuery background?

[從AngularJS控制器調用jQuery的功能（指

來源

2015-07-02 05:43:49 dfsq

Jquery事件與Angular js無法正常工作

回答

相關問題