làm thế nào để vượt qua biến js góc bên trong chức năng onclick như tham số

Question

Tôi đã cố gắng vượt qua biến AngularJS làm giá trị đối số bên trong onclick() để gọi hàm javascript. Bất cứ ai có thể hướng dẫn tôi làm thế nào để làm điều đó?

Mã của tôi:

<div onclick="deleteArrival({{filterList.id}})" class="table-icon deleteIcon">{{filterList.id}}</div> 

Answer 1

Bạn nên sử dụng ng nhấp chuột, không có lý do để sử dụng onclick như góc cung cấp cho bạn với chức năng này

<div ng-click="deleteArrival(filterList.id)" 
    class="table-icon deleteIcon">{{filterList.id}}</div> 

Sau đó, bạn sẽ di chuyển chức năng của mình vào Bộ điều khiển AngularJS , Và ràng buộc nó vào phạm vi

$scope.deleteArrival = function(filterListId) { ... }; 

Nếu có HOÀN TOÀN cần phải sử dụng onclick để gọi một chức năng bên ngoài, bạn có thể thay đổi chức năng để một cái gì đó như thế này trong phạm vi của bạn, vẫn còn sử dụng những ng-bấm thuộc tính trên:

$scope.deleteArrival = function(filterListId) { window.deleteArrival(filterListId); }; 

Tuy nhiên tôi không thể nhìn thấy một lý do để không di chuyển nó vào phạm vi của bạn

Answer 2

Bạn có thể dễ dàng giải quyết vấn đề bằng cách sử dụng ng-click nhưng bạn nên có deleteArrival phương pháp trong phạm vi của bạn.

Markup

<div ng-click="deleteArrival(filterList.id)" class="table-icon deleteIcon"> 
    {{filterList.id}} 
</div> 

Answer 3

thử này mà không có dấu ngoặc nhọn deleteArrival (filterList.id)

Answer 4

điều Trên đây là một cách dễ dàng có thể sử dụng ng-click chỉ thị và có chức năng đó trong phạm vi điều khiển, chỉ có điều là bạn cần phải gán của bạn java-script functio n tham chiếu đến biến phạm vi điều khiển. Không cần phải viết lại hàm trong phạm vi của bạn một lần nữa. Vượt qua tham chiếu của hàm sẽ thực hiện thủ thuật.

Markup

<div ng-click="deleteArrival(filterList.id)" class="table-icon deleteIcon"> 
    {{filterList.id}} 
</div> 

khiển

//assign javascript method reference in controller 
$scope.deleteArrival = deleteArrival; 

Answer 5

Bạn không được phép để tạo ra một ràng buộc cho xử lý sự kiện thuộc tính như onclick, onload, onsubmit, vv trong angularjs vì, không có giá trị thực tiễn nào trong việc ràng buộc các thuộc tính này và làm như vậy nó chỉ phơi bày ứng dụng của bạn với các lỗ hổng bảo mật như XSS. Vì những lý do này ràng buộc với các thuộc tính xử lý sự kiện (tất cả các thuộc tính bắt đầu với thuộc tính on và formaction) không được hỗ trợ trong angularjs.

Đối với trường hợp của bạn,

Bên ng-repeat, sử dụng ng-click cho việc gửi các giá trị cho chức năng của bạn và tuyên bố chức năng rằng trong bộ điều khiển.

See here for documentation of ng-click

Hy vọng điều này sẽ hữu ích!

Answer 6

Tôi sẽ không đoán trước lý do bạn không sử dụng ng-click, vì những người đóng góp khác đã chỉ ra rằng bạn thực sự 'đã'. Tuy nhiên nếu bạn thực sự muốn/cần, heres đề xuất của tôi bằng cách sử dụng 'này' và dữ liệu thuộc tính.

<div data-filterListId="{{filterList.id}}" onclick="deleteArrival(this)" class="table-icon deleteIcon">{{filterList.id}}</div> 
function deleteArrival(arrivalElem) { 
    alert('myId=' + arrivalElem.getAttribute("data-filterListId")); 
} 

Answer 7

Tôi có trường hợp không thể sử dụng ng-click do ràng buộc cửa sổ. Đã không nhận được câu trả lời trực tiếp nhưng bên dưới đã làm việc cho tôi. Tôi biết nó không phải là một giải pháp tốt nhưng hoàn toàn khả thi trong trường hợp của tôi.

angular.element (this) .scope(). CtrlName.variable

Bạn có thể thử sử dụng cấu trúc lớp của riêng bạn. Vì vậy, các nhấp chuột sẽ được như sau:

onclick = "test (. Angular.element (this) .scope() ctrlName.ObjName.variable)"

Answer 8

Nếu bạn vẫn muốn sử dụng onclick, đây là công việc đối với tôi, tôi hy vọng nó cũng phù hợp với bạn.

<div id="{{filterList.id}}" onclick="deleteArrival(this.id)" class="table-icon deleteIcon">{{filterList.id}}</div>