2014-02-16 6 views
6

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

Это моя директива

'use strict'; 
app.directive('province', function($compile) { 
    return { 
     restrict: 'E', 
     link: function (scope, element, attrs, controller) { 
      var markup = "<select></select>"; 
      var elem = angular.element(element); 
      elem.replaceWith($compile(markup)(scope)); 
     } 
    }; 

}) 

HTML:

<province class="form-control" data-target"elemntId"></province> 

Я хочу, чтобы мой <select> содержит класс и другие атрибуты, которые я добавил к директиве в HTML.

вывод, который я хочу: <select class="form-control" data-target="elementId"></select>

Я использовал angular.element(element).attr(attr);, но он не работал;

Любая помощь приветствуется заранее.

Редактировать

Я хочу, чтобы все атрибуты, которые существуют в ATTRS функции связи, которые будут добавлены к markup.

ответ

4

В зависимости от ваших потребностей может, вам не нужно компилировать самостоятельно. Вместо этого вы можете использовать шаблон и заменить.

app.directive('province', function() { 
    return { 
     restrict: 'E', 
     template: '<select></select>', 
     replace: true, 
     link: function (scope, element, attrs) { 
     } 
    }; 
}); 

See plnkr

+1

Я не знаю, что этот ответ не принят, пока нет, но СПАСИБО! Это простое решение, и я еще не видел его в каких-либо учебниках, которые я закончил. – Dustin

1

Вы можете использовать параметр функции связующей attrs - это поможет вам значение атрибутов:

attrs.class и attrs.dataTarget являются те, которые нужны.

Вы посмотрите на документацию here что разрабатывающей дальнейшее использование функции связующей

7

Я бы перебрать массив атр директивы и применить его к шаблону:

app.directive('province', function($compile) { 
return { 
    restrict: 'E', 
    replace:true, 
    template: "<select></select>", 
    link: function (scope, element, attrs) { 
     var attr; 
     for (attr in attrs.$attr) { 
     if(attrs.hasOwnProperty(attr)){ 
      element.attr(attr, attrs[attr]); 
     } 
     } 
    } 
}; 

})

Директива Tag:

<province foo="bar" foo1="bar1"></province> 

Составлено в:

<select foo="bar" foo1="bar1"></select> 

Plunkr

Смежные вопросы