AngularJS chỉ thị ràng buộc một hàm với nhiều đối số

Tôi đang gặp một số sự cố khi liên kết một hàm được xác định trong bộ điều khiển với chức năng gọi lại trong chỉ thị. Mã của tôi trông giống như sau:AngularJS chỉ thị ràng buộc một hàm với nhiều đối số

Trong điều khiển của tôi:

$scope.handleDrop = function (elementId, file) { 
    console.log('handleDrop called'); 
}

Sau đó, chỉ thị của tôi:

.directive('myDirective', function() { 
    return { 
     scope: { 
     onDrop: '&' 
     }, 
     link: function(scope, elem, attrs) { 
     var myFile, elemId = [...] 

     scope.onDrop(elemId, myFile); 
     } 
    });

Và trong trang html của tôi:

<my-directive on-drop="handleDrop"></my-directive>

Không có may mắn với mã ở trên. Từ những gì tôi đã đọc trong các hướng dẫn khác nhau, tôi hiểu tôi phải xác định các đối số trong trang HTML?

Nguồn

2013-09-24 Joseph Paterson

Có một sai lầm nhỏ trong mã của bạn, hãy thử các mã dưới đây và nó sẽ làm việc cho bạn

<!doctype html> 
<html ng-app="test"> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script> 

    </head> 
<body ng-controller="test" >  


<!-- tabs --> 
<div my-directive on-drop="handleDrop(elementId,file)"></div> 

<script> 
    var app = angular.module('test', []); 

    app.directive('myDirective', function() { 
     return { 
      scope: { 
       onDrop: '&' 
      }, 
      link: function (scope, elem, attrs) { 
       var elementId = 123; 
       var file = 124; 
       scope.onDrop({elementId:'123',file:'125'}); 

      } 
     } 
    }); 

    app.controller('test', function ($scope) { 
     alert("inside test"); 
     $scope.handleDrop = function (elementId, file) { 
      alert(file); 
     } 
    }); 

    </script> 
</body> 


</html>

Nguồn

2013-09-24 06:01:07

Hành vi này được xác định trong tài liệu hướng dẫn ở góc nào? –

Dường như không có chủ đề thực sự trong tài liệu nhưng chủ đề là chức năng liên kết của các chỉ thị, http://docs.angularjs.org/guide/directive – tommybananas

Rõ ràng các tên tham số phải khớp chính xác với đánh dấu; Tôi tự hỏi nếu điều này sẽ tồn tại minification? – TrueWill

100

phương pháp thay thế đó sẽ tồn tại việc rút gọn

rời html của bạn vì nó là:

<my-directive on-drop="handleDrop"></my-directive>

thay đổi cuộc gọi đến:

scope.onDrop()('123','125')

để ý đến dấu mở và dấu ngoặc đơn mở thêm cho onDrop. Điều này sẽ khởi tạo hàm thay vì tiêm mã của hàm.

Tại sao nó tốt hơn

thay đổi tên các thông số trong handleDrop() định nghĩa (hoặc thậm chí thêm một số chi tiết, nếu bạn xử lý nó một cách chính xác) sẽ không làm cho bạn thay đổi mỗi chỉ thị tiêm trong html. nhiều DRYer.
như @TrueWill đã đề xuất, tôi gần như chắc chắn các giải pháp khác sẽ không tồn tại giảm thiểu, trong khi mã này vẫn ở mức linh hoạt tối đa và là tên bất khả tri.

một lý do cá nhân là cú pháp đối tượng, mà làm cho tôi viết mã nhiều hơn nữa:

functionName({xName: x, yName: y})

(và thêm chữ ký chức năng trong mỗi cuộc gọi chỉ thị)

như phản đối

functionName()(x,y)

(không bảo trì cho html của bạn)

tôi đã tìm thấy giải pháp tuyệt vời này here.

hy vọng điều đó sẽ hữu ích!

Nguồn

2014-10-07 20:22:35 nurinur

Điều này làm việc cho tôi là tốt, nhưng tôi đã có một vấn đề bằng cách sử dụng ký hiệu đối tượng. Sử dụng rõ ràng các lớp trong Typescript. [bình luận này] (http://stackoverflow.com/questions/38777903/invoking-function-breaks-scope?noredirect=1#comment64927293_38777903) đã giúp tôi sửa nó. –

AngularJS chỉ thị ràng buộc một hàm với nhiều đối số

Trả lời

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