I am currently utilizing an attribute directive in order to update the DOM with a variable named profileImage. The directive, known as ppt-profile-icon, functions correctly except when placed within an ng-repeat. Despite scouring through numerous queries on Stackoverflow, I have yet to find a solution.
Below is the HTML code:
<div class="img-preview" ng-style="{'background-image': 'url(' + profileImage + ')'}"></div>
<ul class="dropdown-menu pre-defined-icons" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li ng-repeat="predefinedImage in vm.predefinedImages">
<a>
<img ppt-profile-icon src="{{predefinedImage}}" width="100%" />
</a>
</li>
<!--This works fine outside of the ng-repeat-->
<li>
<a>
<img ppt-profile-icon src="content/img/people/noProfileIcon.svg" width="100%" />
</a>
</li>
</ul>
And here is my custom directive:
angular
.module('app.core')
.directive('pptProfileIcon', function ($timeout) {
//link function for DOM manipulation
function linkFunction(scope, elem, attrs) {
elem.bind('click', function () {
scope.profileImage = attrs.src;
scope.$apply();
});
}//end
//Directive Declaration
return {
restrict: "A",
controller: ['$scope', function ($scope) {
//sets environment
}],
link: linkFunction
}//end
});//end
Within my link function, I have attempted:
attrs.$observe('src', function (val) {
$timeout(function () {
scope.profileImage = val;
scope.$apply();
});
});
$timeout(function () {
scope.profileImage = attrs.src;
scope.$apply();
});