Директива по индивидуальному заказу

Question

Я создаю небольшое приложение для поиска, используя AngularJS и Elasticsearch. Я использую AngularJS UI Bootstrap Typeahead для функциональности автозаполнения. Теперь я пытаюсь создать директиву пользовательского поиска для функции поиска. Все еще изучая директивы AngularJS ...

Я должен просто добавить директиву UT Bootstrap Typeahead в эту настраиваемую директиву поиска, не так ли? (как attr).

Так что мне просто нужно передать функцию предложения, функцию поиска и условия поиска (ng-model) в мою специальную директиву поиска?

Answer 1

Использование примеров и с ссылкой от Angular Developer Guide: Directives.

Q1: «Я должен просто добавить директиву TypeAhead Bootstrap для этой директивы пользовательского поиска, правильно? (Как attr)».

A1: Как пользовательские директивы зависимость впрыскивается, вы должны быть в состоянии использовать любой угловой компонент, который, как обычно зависимости Inject:

«Так же, как module.controller API, аргумент функции в модуле. директива - это инъекция зависимости. Из-за этого мы можем использовать $ interval и dateFilter внутри нашей функции ссылки директивы. "

angular.module('docsTimeDirective', []) 
.controller('Controller', ['$scope', function($scope) { 
    $scope.format = 'M/d/yy h:mm:ss a'; 
}]) 
.directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) { 

Q2: «Так что я просто должен был бы передать функции предложения, функции поиска и условия поиска (нг-модель) в моей пользовательской директивы поиска?»

A2: Это один из способов сделать это, однако ваша директива будет зависеть от хоста контроллера, чтобы иметь функциональность. If you go with this route you would do so with the & operator.

Я бы пошел с link property. Здесь ваша директива может иметь код, необходимый для вычислений, и вы можете вводить в него параметры поиска с помощью оператора =.

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

Директива:

function statisticsTableDirective(common) { 
     return { 
      restrict: 'E', 
      scope: { 
       tabledata: '=' 
      }, 
      templateUrl: 'app/statistics/statisticsTable.html', 
      link: function (scope, element, attrs) { 
       var vm = scope; 
       vm.isLastMonth = isLastMonth; 

       function isLastMonth(index) { 
        return index+1 === new Date().getMonth(); 
       } 
      } 
     }; 
    } 

В statisticsTable.html теперь я могу использовать isLastMonth как бы непосредственно от объема. Как в простом ng-классе:

ng-class="::{highlight : isLastMonth($index)}"></td>