Лучший шаблон для доступа к контроллеру директивы

Question

Директива «форма aka ngForm» может быть подключена через имя формы.

<form name="testForm"> </form> 

Тогда в контроллере мы можем сделать что-то вроде этого:

$scope.testForm.$valid 

И в HTML:

<button ng-show="testForm.$valid> 

Это делает «форма» директива действительно компонент пользовательского интерфейса с доступными свойствами и методами (точно так же, как в не-html мире)

Есть ли стандартный способ достижения такого рода compo nentization для собственных директив? Например, я хотел бы иметь директиву «список» со всеми методами, как «selectElement», «scrollToTop», «scrollToElement», «йоЗотеЬЫпд» и т.д., и использовать его как этот

<list name="myList></list> 

<button ng-click="myList.doSomething()"> 

и в какой-то другой контроллер:

$scope.myList.scrollToTop(); 

Я написал несколько простых хак для этого на основе какой «форма» директива делает - это издает публичный API директивы в области видимости переменной, определенной по имени атрибута:

app.directive('list', function() { 
     return { 
      restrict: 'E', 
      controller: function ($scope, $element, $attrs) { 

       // check if name of component does not pollute scope 
       if ($attrs.name) { 
        if (angular.isDefined($scope[$attrs.name])) { 
         throw "Error component already defined with name: " + $attrs.name; 
        } else { 

         // publish controller object aka public API 

         scope[$attrs.name] = { 
           date: new Date(), 
           myFunction: function(){} 
         }; 
        } 
       } 
      }, 
      template: '<ul></ul>' 
     } 
    }); 

Итак:

<list name="myList"></list> 
<button ng-click="myList.myFunction()"> 

и

$scope.myList.myFunction(); 

Но это не работает с изолированной директивой области видимости - обходной путь проходил мимо объекта апи как атрибут с два способа связывания, как в этом вопросе: How to call a method defined in an AngularJS directive?.

Я также подумал об определении api в сервисе, но это действительно уродливо - сервис должен быть каким-то образом прикреплен к правильному элементу директивы DOM.

Итак, мой вопрос: какой лучший шаблон для доступа к методам и свойствам директив как из HTML, так и из других контроллеров, создающих директивы реальных компонентов пользовательского интерфейса?

Или более простой вопрос - как получить доступ к контроллеру управления от другого контроллера или из другого выражения в HTML, как мы можем сделать из другой директивы через «require».

Answer 1

Даже если область выделения изолирована, она по-прежнему имеет свойство $parent, которое указывает на родительскую область. Так что в отношении к вашему вопросу, решение может выглядеть следующим образом:

angular.module('sample', []).directive("foo", function() { 
    return { 
    controller: function($scope, $element, $attrs) { 
     $scope.$parent[$attrs.foo] = this; 
     this.apiMethodName = function() { 
      // ... 
     }; 
    }, 
    scope: {}, 
    restrict: 'A' 
    }; 
}); 

Примерить Plunker: http://plnkr.co/edit/qmGcAY?p=preview

Answer 2

Вы должны использовать директивный контроллер и опубликовать его через controllerAs. watch this