AngularJS: доступ к изолированной области доступа от родительского контроллера

Я хочу написать директиву с изолированной областью, но также хочу сделать эту область доступной для родительского контроллера области. Я нашел это решение:

<div ng-controller="Main">
  <popupbutton directive-scope="popup"></popupbutton>
</div>

app.directive('popupbutton', [function() {
  return {
    restrict:   "E",
    scope:      {    
      directiveScope: "="
    },
    link:       function(sc, el, attrs) {
      sc.directiveScope = sc;
      sc.testvalue = 'foo';
    }
  };  
}]);

app.controller('Main', function($scope) {
  alert($scope.popup.testvalue);  // Where did the property 'popup' come from?!?
});

См. Plunker.

Я считаю это немного уродливым, потому что он включает в себя запись атрибута в HTML и код контроллера, который вы не можете определить, откуда взялось свойство scope. Есть ли лучший способ сделать это?

Edit:

Кроме того, кажется, что $scope.popup даже не доступен, когда запускается контроллер "Main". Функция привязки директивы еще не выполнена?

Ответы

Ответ 1

Чтобы поддерживать надлежащее разделение проблем, вы не должны смешивать области. Не говоря уже о том, что будет сложно синхронизировать. Подводя итог: ваша директива не должна знать ничего о родительской области (или ее контроллере), и ваш контроллер не должен знать ничего о внутренней директиве. Они представляют собой отдельные компоненты в отдельных слоях.

Правильный способ связи между контроллером и директивой - это атрибуты директивы. В случае всплывающего окна, скажем, это можно сделать с помощью простого логического значения.

Контроллер и директива:

app.directive('popupbutton', [function() {
  return {
    restrict: "E",
    scope: { isOpen: "=" },
    template: '<a ng-click="isOpen = !isOpen">Toggle</a><div>Open? {{isOpen}}'
  };
}]);

app.controller('MainCtrl', function($scope) {
  $scope.isOpen = false;
});

И разметка:

<popupbutton is-open="isOpen"></popupbutton>

Этот метод не требует никакой логики, работает из коробки и поддерживает чистое разделение проблем. Здесь обновленный плункер: http://plnkr.co/edit/otIaGCLmiNdGcYEgi60f?p=preview