2016-02-26 2 views
0

Пусть говорят, мы имеем следующую директиву:Имея несколько суффикса для того же директивы (angularjs)

app.directive('testList', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      //do stuff 
     } 
    } 
}); 

Я хотел бы назвать эту директиву многоэлементного в HTML

<button test-list-add></button> 
<table test-list="listObject"> 
    <tr ng-repeat="list in testList"> 
     <td test-list-click>list.item</td> 
    </tr> 
</table> 

это возможно войдите в функцию link для каждого атрибута, начиная с test-list (test-list-add, test-list, test-list-click)?

Спасибо

+1

Вы можете выполнить поиск по атрибутам, но то, что вы пытаетесь сделать именно? вид использования, который вы пытаетесь сделать, заставляет меня думать, что вы должны взглянуть на переключение. Или вы должны указать шаблон в своей директиве, чтобы вы могли поместить все свои атрибуты в один элемент dom и сгенерировать нужный вам шаблон. – Walfrat

+0

Спасибо, за ваш комментарий, я также думаю, что я должен посмотреть на переключение, но так как я новичок в Я хочу, чтобы это прогрессивно. Как я понимаю, переключение помогает мне переформатировать html, но если у меня есть события там, я должен также использовать компиляцию $, не так ли? – IsraGab

+0

Существует два варианта использования transcluding: либо поместить ng-transclude в ваш шаблон, либо вызвать его в вашей функции ссылок следующим образом: angular.element ([ttransclude element вашего шаблона]). AppendChild (transclude (scope. $ Parent)) ; Обратите внимание, что для работы с доменом $. $ Parent вы должны использовать область: true и не изолированную область. Для части события угловая обертка почти всех нативных событий, с ng-click, ng-focus, ng-blur, .... но вы можете просто вставить компиляцию $ в свою директиву и использовать ее в функции ссылок и после добавления преобразует элемент в результат. – Walfrat

ответ

0

Вы хотите передать атрибуты вашей директивы и делать какие-то действия, в зависимости от атрибута:

app.directive('testList', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      'add': '@', // Text 
      'click': '&' // function 
     }, 
     link: function (scope, element, attrs) { 
      // scope.add - your Text you passed 
      // scope.click(); - calls your function you passed 
     } 
    } 
}); 

<button test-list add="test"></button> 
<table test-list="listObject"> 
    <tr ng-repeat="list in testList"> 
     <td test-list click="myFunc()">list.item</td> 
    </tr> 
</table> 

Вы не можете повторить директиву (то, что вы obvis пытаетесь сделать) ,

Если вы хотите сделать несколько суффикс для директивы, вы должны объявить их один за другим:

app.directive('testListAdd', function() {...}); 
app.directive('testListclick', function() {...}); 

<test-list-add></test-list-add> 
<test-listclick></test-listclick> 
Смежные вопросы