Các yếu tố nhắm mục tiêu jQuery bên trong mẫu angularjs, không kích hoạt

Question

Tôi có ứng dụng góc bên trong chỉ mục, các mẫu khác nhau có chế độ xem ng. Trong chỉ mục, tôi tải tất cả các tệp kịch bản (góc cạnh và jquery), bao gồm tệp main.js chứa mã jQuery do tôi viết. Nếu tôi nhắm mục tiêu các phần tử từ tệp chỉ mục với jQuery, mọi thứ đều hoạt động tốt, nhưng nếu tôi nhắm mục tiêu các phần tử bên trong khuôn mẫu, thì jQuery sẽ không hoạt động.

Nếu tôi sử dụng firebug để gỡ lỗi jQuery và tôi đặt một số điểm ngắt ở đầu hàm nhấp chuột và bên trong hàm, mã hoạt động.

Nếu tôi đặt các thẻ bên trong mẫu, với mã jQuery, mã hoạt động.

Đây là mã jquery của tôi mà tôi cố gắng chạy:

$('.text-down-arrow').click(function() { 
    $('.text-up-arrow').removeClass('hidden'); 
}); 

tôi đã cố gắng gói tất cả mọi thứ trong file main.js như:

(function ($) { 
     $(document).ready(function() {...}); 
    })(jQuery); 

hoặc không có $ (document) .ready (chức năng() {});

Bất kỳ ai biết điều gì gây ra điều này hoặc nếu tôi nên tải jquery bên trong mỗi mẫu?

Answer 1

Jquery sẽ không thực hiện thủ thuật. bởi vì tại thời điểm tài liệu sẵn sàng. HTML chưa có mũi tên. bộ góc nhìn tại một số điểm

nên u muốn kích hoạt các nhấp chuột theo cách góc với ng-click

1. gắn nhấp chuột vào yếu tố html <div ng-class="{hidden: isHidden}" ng-click="{ toggleHidden() }">

2. tạo một hàm chuyển đổi một var được sử dụng trong ng-class $scope.toggleHidden = function() { $scope.isHidden = !$scope.isHidden; }

Answer 2

Như Mihnea đã chỉ ra, phần tử mà bạn đang gắn trình xử lý sự kiện không tồn tại trong DOM khi bạn chạy tập lệnh.

May mắn là bạn có thể sử dụng .delegate() để Đính kèm trình xử lý cho một hoặc nhiều sự kiện cho tất cả các yếu tố phù hợp với công cụ chọn, hiện tại hoặc trong tương lai, dựa trên bộ phần tử gốc cụ thể.

http://api.jquery.com/delegate/