I am currently working on a custom attribute directive to handle a src-like attribute that represents a relative path to a directory.
The directory path is stored in a global variable (let's call it mydir).
This attribute should be replaced with an ng-src combined with the directory path.
Here is how I intend to use it:
<md-icon my-src="cake.svg"></md-icon>
<md-icon my-src="{{ anExpression }}"></md-icon>
<md-icon my-src="{{::onTimeBinding}}"></md-icon>
In addition, I want this functionality to work beyond Angular Material usage.
Thank you for your assistance!
Edit:
I apologize for any confusion. My intention is for the mySrc directive to be usable across all types of elements. It should be converted to ng-src with the base directory. I have created a Plunkr, but it seems to not be functioning correctly. The current code looks like this:
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);
}
}
}
}
});
Usage example:
<img my-src="100" />
<img my-src="{{ expr }}" />
<img my-src="{{:: oneTimeExpr }}" />
We also need to ensure compatibility with the last two options.