Yuvalanmış yönergeler arasındaki iletişim

Direktifler arasında iletişim kurmanın birkaç yolu var gibi görünüyor. İç direktiflerin dışa bir şey iletmesi gereken iç içe direktifleriniz olduğunu söyleyin (örneğin, kullanıcı tarafından seçildi).

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

Şimdiye kadar bunu yapmanın 5 yolu var

require: ana direktif

innerYönergesi gerektirebilir outerkendi denetleyicisi bazı yöntemi maruz bırakabilir yönergesini. Yani innertanımında

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

Ve outerdirektifin kontrolünde:

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

$emit Etkinlik

innerYönerge can $emitbir olay, outerdirektif yoluyla yanıt verebilir $on. Yani innerdirektifin kontrolünde:

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

ve outerdirektif kontrolünde:

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

Üst kapsamdaki ifadeyi, üzerinden yürüt &

Öğe, ana kapsamdaki bir ifadeye bağlanabilir ve uygun bir noktada yürütebilir. HTML şöyle olurdu:

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

Böylece innerkontrolör çağırabileceği bir 'innerChoose' işlevine sahiptir.

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

(bu durumda) outerdirektifin kapsamındaki 'functionOnOuter' işlevini çağırır :

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

İzole edilmeyen kapsamda kapsam devralma

Bunların iç içe denetleyiciler olduğu göz önüne alındığında, kapsam devralma iş başında olabilir ve iç yönerge, yalıtılmış bir kapsamı olmadığı sürece, kapsam zincirindeki tüm işlevleri çağırabilir). Yani innerdirektifte:

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

Ve outerdirektifte:

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

Hem iç hem de dışa servis enjekte edilerek

Bir servis her iki yönetmeliğe de enjekte edilebilir, böylece aynı nesneye doğrudan erişebilir veya servisi bildirmek için işlevleri çağırabilir ve hatta bir pub / alt sisteme bildirilmek için kendilerini kaydettirebilirler. Bu, direktiflerin iç içe geçmesini gerektirmez.

Soru : Her birinin diğerlerine göre potansiyel sakıncaları ve avantajları nelerdir?

Tercihim, &direktif kapsamındaki bir niteliği tanımlamak için öncelikle scope: {}bir direktifin tanımını API olarak görüyorum çünkü . Yönergenin hangi bilgilerin düzgün çalışması gerektiğini görmek için bir kapsam niteliği tanımına bakmak, $emitd olayları, miras alınan kapsam işlevleri veya enjekte edilen denetleyicilerde kullanılan işlevler için bağlantı ve denetleyici işlevlerini araştırmaktan çok daha kolaydır .

Benim fikrim:

Hizmetler, modüller / direktifler / denetleyiciler arasında davranış / veri paylaşmanın tercih edilen yoludur. Direktifler iç içe geçebilen veya olmayan şeylerden izole edilmiştir. Kontrolörler mümkün olduğu kadar görüntü modeline bağlı kalmalı, ideal olarak hiçbir iş mantığı ortaya çıkmamalıdır.

Yani:

Ana kapsam işlevlerine erişerek bunları birbirine bağlamaya başladığınızda, bunları çok fazla bağlama ve tüm uygulamayı okunaksız hale getirme ve bileşenleri yeniden kullanılamaz hale getirme riskiniz olduğunu düşünüyorum. Bir servisteki paylaşılan veri veya davranışı ayırdığınızda, çalışma zamanında kullanılacak servisi belirlerken bile tüm direktifleri farklı veriler / davranışlarla yeniden kullanma avantajına sahip olursunuz. Bağımlılık enjeksiyonunun konusu da budur.