директива angular custom attribute должна быть заменена другой директивой

0

Я пытаюсь реализовать настраиваемую директиву атрибута для атрибута src-like, который должен представлять относительный путь к каталогу.

Путь к каталогу находится в глобальной переменной (например, mydir).

Атрибут должен быть заменен на ng-src в сочетании с каталогом.

Я хочу использовать его так:

<md-icon my-src="cake.svg"></md-icon>
<md-icon my-src="{{ anExpression }}"></md-icon>
<md-icon my-src="{{::onTimeBinding}}"></md-icon>

Я также хочу поддержать это не только для использования материалов в стиле angulat.

Спасибо за помощь!

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

Мне жаль, что я не очень хорошо объяснял себя. Я хочу поддержать использование директивы mySrc во всех видах элементов. Он должен быть заменен как ng-src базовым каталогом. Я создал plunkr, но он не работает. Код выглядит так:

app.directive("mySrc", function() {

  return {
    restrict: "A",
    compile: function(element, attrs) {

      return {
        pre: function(scope, element, attributes) {
          var baseUrl = 'http://dummyimage.com/';
          attributes.$set("ng-src", baseUrl + attributes.mySrc);
        }
      }

    }
  }
});

Пример использования:

<img my-src="100" />
<img my-src="{{ expr }}" />
<img my-src="{{:: oneTimeExpr }}" />

Для нас важно также поддерживать последние два варианта.

  • 2
    Вы можете вставить свой код той директивы, которая у вас есть?
  • 0
    а твой сниппт есть?
Показать ещё 1 комментарий
Теги:
angular-material
angularjs-directive

2 ответа

2
Лучший ответ

Ваша директива действительно работает, но ваш подход немного отключен. Вы не хотите менять my-src на ng-src, так как ng-src - это директива, которая делает что-то похожее на то, что вы пытаетесь сделать. То, что вы на самом деле хотите сделать, это изменить my-src на src, поэтому браузер может реально отобразить тег.

Другими словами, attributes.$set("src", baseUrl + attributes.mySrc); делает то, что вы хотите. Однако это не динамично.

Взятый из источника для ng-src, вы можете использовать $observe для отслеживания вашего атрибута для изменений.

pre: function(scope, element, attributes) {
    var baseUrl = 'http://dummyimage.com/';
    attributes.$observe("mySrc", function(value) {
        attributes.$set("src", baseUrl + attributes.mySrc);
    })
}

<button ng-click="expr = '200'">Test dynamic</button>

Я просто добавил быструю кнопку, чтобы проверить динамические изменения. При mySrc $observe, при изменении атрибута mySrc атрибут src будет обновляться новым URL-адресом.

http://plnkr.co/edit/vogwUGai8iMavk5elDVB?p=preview

Поделиться
1

Вы можете выполнить необходимые действия в реализации директивы:

var app = angular.module('app', []);

app.directive('mySrc', function ($compile) {
    return {
        restrict: 'A',
        replace: true,
        scope: true,
        template: '<li><img ng-src="{{ image }}" /></li>',
        link: function (scope, element, attrs) {
          var baseUrl = 'http://dummyimage.com/';
          console.log(attrs);

          scope.image = baseUrl + attrs.mySrc;
        }
    };
});

Вот работающий plunkr

Поделиться
  • 0
    Пожалуйста, смотрите мое редактирование

Ещё вопросы

Сообщество Overcoder
Наверх
Меню