Я пытаюсь реализовать настраиваемую директиву атрибута для атрибута 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 }}" />
Для нас важно также поддерживать последние два варианта.
Ваша директива действительно работает, но ваш подход немного отключен. Вы не хотите менять 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-адресом.
Вы можете выполнить необходимые действия в реализации директивы:
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