góc: Bind chức năng gọi lại sử dụng & và pass-trong lập luận

Question

tôi có (giản thể) chỉ

angular.module('myApp') 
    .directive('myButton', function() { 
     return { 
      restrict: 'E', 
      scope: { 
       callbackFn: '&' 
      }, 
      template: '<button ng-click=ca;;backFn($evenb)' 
     } 
    }); 

Bây giờ, trong một số bộ điều khiển cha mẹ tôi đã xác định một hàm callback:

this.myCallback = function ($event) { 
    this.doIt($event); 
} 

và HTML:

<my-button callback-fn="page.myCallback()"></my-button> 

(tôi đang sử dụng những thứ như bindToController và controllerAs)

Vấn đề là $event không bao giờ được chuyển đến myCallback, rất có thể phải làm với cách tôi ràng buộc chức năng này (&). Nhưng mặt khác, bên trong myCallback Tôi muốn sử dụng this.

Có cách nào để sửa lỗi này không? mà không làm những việc như

var self = this; 
this.myCallback = function ($event) { 
    self.doIt($event); 
} 

Answer 1

Bạn chưa hoàn toàn thiết lập các ràng buộc của mình một cách chính xác. Bạn có thể truyền lại các đối số từ chỉ thị đến bộ điều khiển cha thông qua một bản đồ khóa-giá trị. Theo (tôi nhấn mạnh) angular docs:

& hoặc &attr - cung cấp một cách để thực hiện một biểu thức trong bối cảnh phạm vi phụ huynh. Nếu không có tên attr nào được chỉ định thì tên thuộc tính được giả định giống với tên cục bộ. Cho <widget my-attr="count = count + value"> và định nghĩa widget của scope: { localFn:'&myAttr'}, thì cô lập thuộc tính phạm vi localFn sẽ trỏ đến trình bao hàm hàm cho biểu thức count = count + value. Thường thì nó là mong muốn để truyền dữ liệu từ phạm vi cô lập thông qua một biểu thức đến phạm vi cha, điều này có thể được thực hiện bằng cách chuyển một bản đồ các tên và giá trị biến cục bộ vào trong trình bao bọc biểu thức fn. Ví dụ: nếu biểu thức là increment(amount) thì chúng tôi có thể chỉ định giá trị số tiền bằng cách gọi số localFn là localFn({amount: 22}).

Vì vậy, đó có nghĩa là trong HTML tốn của bạn, bạn cần phải thêm các thông số:

<my-button callback-fn="page.myCallback(parentEvent)"></my-button> 

Và rồi trong chỉ thị:

...... 
restrict: 'E', 
scope: { 
      callbackFn: '&' 
     }, 
template: '<button ng-click="ctrl.callbackFn({parentEvent: $event})">Callback</button>' 

,

Answer 2

Theo tôi bạn nên làm theo cách này:

Trong trang HTML của bạn:

<my-button callback-fn="page.myCallback(event)"></my-button> 

Trong chỉ thị của bạn:

angular.module('myApp') 
    .directive('myButton', function() { 
     return { 
      restrict: 'E', 
      controller: 'Controller', 
      bindToController: true, 
      scope: { 
       callbackFn: '&' 
      }, 
      template: '<button ng-click=foo($event)' 
     } 
}); 

function Controller() { 
    this.foo = function (event) { 
     this.callbackFn({event: event}); 
    } 
} 

Nhưng tôi 'm không sur điểm của câu hỏi của bạn là gì.