Ik moet een functie kunnen aanroepen om code uit te voeren om de bron van een afbeelding dynamisch op te halen. Het volgende codefragment toont een voorbeeld van wat ik wil:
<!-- "myFunction" exists in the current scope -->
<img ng-src="myFunction()" />
Ik weet zeker dat dit eenvoudig moet zijn, maar ik kan niets vinden in de ng-src documentatie ! Heeft iemand anders dit ooit gedaan?
Bij voorbaat dank!
De richtlijn (voorbeeld gebaseerd op antwoorden)
Anderen hebben een richtlijn aanbevolen. Ik kan geen klantcode posten, dus schreef ik een kort voorbeeld van hoe dat eruit zou kunnen zien in plunker (zie hier). De kernrichtlijn zelf is:
app.directive("imageSource", function (){
return { link: function (scope, element, attrs){
element.attr("src", scope.imageUrlArray[attrs.imageSource]);
}
};
});
Ik weet dat wat ik hier als voorbeeld heb waarschijnlijk gewoon gedaan kan worden met de ng-repeat met behulp van de variabele in een ng-src, maar het dient als een voorbeeld van hoe een richtlijn zoueruitziet like als er een nodig was.
Antwoord 1, autoriteit 100%
<img ng-src="{{myFunction()}}" />
Antwoord 2, autoriteit 5%
Ok, ik ben er uiteindelijk gekomen:
JavaScript:
angular.module('MyApp', [])
.controller('Ctrl2', function($scope) {
})
.directive('mySrc', function() {
return {
restrict: 'A',
link: function ( scope, elem, attrs ) {
//replace test with whatever myFunction() does
elem.attr('src', 'test1');
}
};
});
HTML:
<div ng-app="MyApp">
<div ng-controller="Ctrl2">
<img my-src />
</div>
</div>
Fiddle
Antwoord 3
Zou het niet beter zijn om myFunction als argument door te geven aan de aangepaste richtlijn? Op die manier kunnen we de twee ontkoppelen en kunnen we gemakkelijk veranderen welke functie we in de toekomst willen gebruiken.
HTML
<body ng-app='testApp'>
<div ng-controller='TestCtrl'>
<img my-src callback='myFunction()' />
</div>
</body>
JS:
angular.module('testApp', [])
.controller('TestCtrl', function($scope) {
$scope.myFunction = function() {
return 'http://nodejs.org/images/roadshow-promo.png';
}
})
.directive('mySrc', function() {
return {
restrict: 'A',
scope: {
callback: '&'
},
link: function ( scope, elem, attrs ) {
elem.attr('src', scope.callback());
}
};
})