Как добавить атрибуты элемента в angular directive

Я новичок в angular. Я хочу написать директиву, которая имеет все атрибуты, которые я добавил к ней при использовании в 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 функции link, были добавлены в markup.

6
angularjs angularjs-directive

3 ответов

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

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

см. plnkr

4

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

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]);
        }
      }
     }
};

})

Директива Тег:

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

компилируется в:

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

Plunkr

7

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

attrs.class и attrs.dataTarget те, которые вам нужны.

вы можете взглянуть на документацию здесь это развивает дальнейшее использование функции связывания

1