2013-04-30 32 views
10

Tôi có một bộ điều khiển như thế này:ng-click không hoạt động trên DOM AngularJS động?

@VariantModalCtrl = ($scope) -> 
    $scope.upload_variant_image = -> 
    alert("test") 

Khi tôi cố gắng gọi hàm upload_variant_image sử dụng ng nhấp chuột, nó chỉ hoạt động khi gắn vào một DOM tĩnh (khi tải DOM), tôi có một liên kết như thế này :

<%= link_to "test", "" , "ng-click" => "upload_variant_image()" %> 

nhưng phần tử này được thêm động sau khi DOM được tải, do đó, nhấp chuột không hoạt động.

Cập nhật Chỉ cần tìm thấy một phần của câu trả lời của tôi sử dụng $ biên dịch chức năng: AngularJS + JQuery : How to get dynamic content working in angularjs

NHƯNG nó không hoạt động khi tôi cập nhật các DOM như thế này trong Rails:

$(".modal-body").html($compile("<%= j render("/variants/form", :variant => @variant) %>")(scope)); 
+0

bạn có thể vui lòng chia sẻ bản trình diễn fiddle hoặc bản trình diễn plunker –

Trả lời

15

tôi sẽ cảnh báo bạn rằng bạn có thể không hoàn toàn chấp nhận triết lý Góc nếu bạn đang thao tác DOM thông qua các phương tiện góc-bên ngoài. Việc thêm các liên kết động với AngularJS cũng đơn giản như bất kỳ thứ gì khác và có lẽ sẽ dễ dàng hơn và thành ngữ hơn việc đưa thư viện bên ngoài của bạn chơi tốt đẹp. Dưới đây là một ví dụ đơn giản dựa trên câu hỏi của bạn: "chỉ làm việc"

<ul> 
    <li ng-repeat="item in items"> 
    <a ng-click="upload_variant_image()">{{item.name}}</a> 
    </li> 
</ul> 

Tất cả bạn cần làm là dây lên các dữ liệu phạm vi một cách thích hợp và điều này sẽ luôn

Điều đó nói rằng, nếu bạn đang thao tác DOM, bạn có thể gây ra các ràng buộc AngularJS xảy ra (với, giả sử, ng-click như bạn mong muốn) bằng cách sử dụng $compile service. Do xem xét các tùy chọn trên tốt hơn, mặc dù. :)

Các vấn đề liên quan