I've recently been exploring different ways to optimize my code, specifically by utilizing a directive instead of the standard img tags. I'm aiming to dynamically modify the ng-if state and the src based on the input value in the directive.
Currently, the code resembles the following:
directive-
'use strict';
angular.module('myApp').directive('listImg', function() {
return {
retrict: 'E',
templateUrl: 'templates/list-img.html',
scope: {
show: '@',
},
link: function($scope) {
$scope.iconImg;
if ($scope.show == "opt1") {
$scope.iconImg = "images/img1.png";
} else if ($scope.show == "opt2") {
$scope.iconImg = "images/img2.png";
} else if ($scope.show == "opt3") {
$scope.iconImg = "images/img3.png";
} else if ($scope.show == "opt4") {
$scope.iconImg = "images/img4.png";
}
}
}
});
template-
<img ng-if="show" ng-src="{{iconImg}}" class="list-image">
and then-
<list-img show="{{item.opt1 ? 'opt1' : ''}}"></list-img>
I haven't been able to successfully implement this and it doesn't seem like the most efficient method... If anyone has any suggestions on how to enhance/revise it, I would greatly appreciate it!
Thank you