Giao tiếp giữa các chỉ thị lồng nhau

Dường như có khá nhiều cách để giao tiếp giữa các chỉ thị. Giả sử bạn có các chỉ thị lồng nhau, trong đó các chỉ thị bên trong phải truyền đạt một cái gì đó ra bên ngoài (ví dụ: nó được người dùng chọn).

<outer>
  <inner></inner>
  <inner></inner>
</outer>

Cho đến nay tôi có 5 cách để làm điều này

require: chỉ thị của phụ huynh

Lệnh innernày có thể yêu cầu lệnh outer, có thể hiển thị một số phương thức trên bộ điều khiển của nó. Vì vậy, trong innerđịnh nghĩa

require: '^outer',
link: function(scope, iElement, iAttrs, outerController) {
   // This can be passed to ng-click in the template
   $scope.chosen = function() {
     outerController.chosen(something);
   }
}

Và trong outerbộ điều khiển của lệnh:

controller: function($scope) {
   this.chosen = function(something) {
   }
}

$emit biến cố

Lệnh innercó thể $emitlà một sự kiện, mà lệnh outercó thể đáp ứng, thông qua $on. Vì vậy, trong innerbộ điều khiển của lệnh:

controller: function($scope) {
  $scope.chosen = function() {
    $scope.$emit('inner::chosen', something);
  }
}

và trong outerbộ điều khiển chỉ thị:

controller: function($scope) {
  $scope.$on('inner::chosen, function(e, data) {
  }
}

Thực hiện biểu thức trong phạm vi cha, thông qua &

Mục này có thể liên kết với một biểu thức trong phạm vi cha và thực hiện nó tại một điểm thích hợp. HTML sẽ như sau:

<outer>
  <inner inner-choose="functionOnOuter(item)"></inner>
  <inner inner-choose="functionOnOuter(item)"></inner>
</outer>

Vì vậy, innerbộ điều khiển có chức năng 'InternalChoose' mà nó có thể gọi

scope: {
  'innerChoose': '&'
},
controller: function() {
  $scope.click = function() {
    $scope.innerChoose({item:something});
  }
}

mà sẽ gọi (trong trường hợp này) là hàm 'functionOnOuter' trên outerphạm vi của lệnh:

controller: function($scope) {
  $scope.functionOnOuter = function(item) {
  }
}

Kế thừa phạm vi trên phạm vi không bị cô lập

Cho rằng đây là các bộ điều khiển lồng nhau, kế thừa phạm vi có thể hoạt động và lệnh bên trong chỉ có thể gọi bất kỳ hàm nào trong chuỗi phạm vi, miễn là nó không có phạm vi tách biệt). Vì vậy, trong innerchỉ thị:

// scope: anything but a hash {}
controller: function() {
  $scope.click = function() {
    $scope.functionOnOuter(something);
  }
}

Và trong outerchỉ thị:

controller: function($scope) {
  $scope.functionOnOuter = function(item) {
  }
}

Bằng dịch vụ tiêm vào cả bên trong và bên ngoài

Một dịch vụ có thể được đưa vào cả hai chỉ thị, vì vậy chúng có thể có quyền truy cập trực tiếp vào cùng một đối tượng hoặc gọi các chức năng để thông báo cho dịch vụ và thậm chí có thể tự đăng ký để được thông báo trong hệ thống quán rượu / phụ. Điều này không yêu cầu các chỉ thị được lồng nhau.

Câu hỏi : Bất kỳ nhược điểm tiềm năng và lợi thế của mỗi so với những người khác là gì?

Sở thích của tôi là xác định một &thuộc tính trong phạm vi chỉ thị chủ yếu vì tôi xem scope: {}định nghĩa của lệnh là API của nó. Việc xem xét một định nghĩa thuộc tính phạm vi sẽ dễ dàng hơn nhiều để xem thông tin nào mà lệnh cần hoạt động đúng so với chức năng quét liên kết và các hàm điều khiển cho $emitcác sự kiện, các hàm phạm vi được kế thừa hoặc các hàm được sử dụng trong các bộ điều khiển được tiêm.

Quan điểm của tôi:

Dịch vụ là cách ưa thích để chia sẻ hành vi / dữ liệu trên các mô-đun / chỉ thị / bộ điều khiển. Chỉ thị là những thứ bị cô lập có thể được lồng hoặc không. Các bộ điều khiển nên bám sát để trở thành một viewmodel càng nhiều càng tốt, lý tưởng là không có logic kinh doanh nào kết thúc ở đó.

Vì thế:

Khi bạn bắt đầu kết nối chúng với nhau bằng cách truy cập các hàm phạm vi cha mẹ, tôi nghĩ rằng bạn có nguy cơ ghép chúng quá khó và làm cho toàn bộ ứng dụng không thể đọc được và các thành phần không thể sử dụng lại được. Khi bạn tách rời dữ liệu hoặc hành vi được chia sẻ trong một dịch vụ, bạn có lợi ích của việc sử dụng lại toàn bộ các lệnh với dữ liệu / hành vi khác nhau thậm chí xác định dịch vụ sẽ được sử dụng trong thời gian chạy. Đó là những gì phụ thuộc tiêm là tất cả về.