JQuery 선택기가 Angular ng-include에서 작동하지 않습니다.

JQuery를 사용하여 각도 응용 프로그램에서 ng-include를 테스트했으며 ng-include에서로드 된 HTML 내용의 JQuery에서 이벤트를 실행할 수 없습니다.JQuery 선택기가 Angular ng-include에서 작동하지 않습니다.

이 예제에서 페이지에는 두 번의 클릭 이벤트가있는 두 개의 패널, 즉 index.html 페이지에있는 painel1과 ng-include를 통해 포함되는 contentPanel.html에있는 painel2가 있습니다. contentPanel.html의 panel2가 작동하지 않습니다. 여기

가 index.html을 수 있습니다 : 여기

<!DOCTYPE> 
<html> 
<head lang="pt-br"> 
    <meta charset="UTF-8"> 
    <title>Teste Javascript</title> 
    <link rel="stylesheet" href="./assets/lib/bootstrap/dist/css/bootstrap.min.css"> 
</head> 
<body ng-app="app"> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Page One</a></li> 
      <li><a href="#">Page Two</a></li> 
     </ul> 
    </div> 
</nav> 


<div ng-controller="HomeController"> 
    <div class="col-md-3"> 
     <div class="panel panel-default"> 
      <div class="panel-body" id="painel1"> 
       {{panel1Text}} 
      </div> 
     </div> 
    </div> 
    <div ng-include="'app/shared/contentPanel.html'"></div> 
</div> 


<script src="./assets/lib/jquery/dist/jquery.min.js"></script> 
<script src="./assets/lib/angular/angular.min.js"></script> 
<script> 
angular.module('app', []); 

angular.module('app').controller('HomeController', function($scope){ 
    $scope.panel1Text = 'Panel 1, click here!'; 

$(document).ready(function(){ 
    $('#painel1').on('click', function(){ 
     alert('Você clicou em um painel!'); 
    }); 

    $('#painel2').on('click', function(){ 
     alert('Você clicou em um painel!'); 
    }); 
}); 
}) 
</script> 
</body> 
</html>

내가에 포함하고있는 파일 contentPanel.html이다 NG-포함

<div class="col-md-3"> 
    <div class="panel panel-default"> 
     <div class="panel-body" id="painel2"> 
      Panel 2, click here! 
     </div> 
    </div> 
</div>

출처

2016-08-31 William

이 접근법 도움이 될 수도 있습니다, 당신은 jQuery를 클릭 할 수 있습니다'# painel2' 대신'.clickme' 대신 http://stackoverflow.com/questions/18876537/jquery-click-events- not-firing-within-angularjs-templates –

'ng-include'가 템플릿을로드하기 전에'jQuery on'이 실행될 수 있습니다. 왜 'ng-click'을 사용하지 않는가? –

@CastroRoy 그게 옳은 일이었던 것 같아요,하지만 난 각도로 사용하고있는 JQuery 레이아웃이 있고 모든 JQuery 이벤트를 각도로 바꾸는 것이 실제적이지는 않을 것입니다. 레이아웃에 업데이트가 있으면, 나는 내 코드도 바꿔야 할 것이다. – William

당신은 jQuery를이 이벤트를 클릭 바인딩 할 수 있습니다 문서 자체와 ng-include으로 DOM 생성주기는 바인딩을 깨뜨리지 않습니다.

$(document).on("click", "#painel2", function() { 
    alert('Você clicou em um painel!'); 
});

I g 이 대답은 아마도 여기에서 대답을 jQuery click events not firing within AngularJS templates

출처

2016-09-01 20:04:07

JQuery 선택기가 Angular ng-include에서 작동하지 않습니다.

답변

관련 문제