angularjs - ejemplos - Cómo llamar a una función en "ng-src"
angularjs material (3)
¿No sería mejor pasar mi función como un argumento a la directiva personalizada? De esa manera, desacoplamos los dos y podemos cambiar fácilmente qué función transmitir en el futuro.
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());
}
};
})
Necesito poder llamar a una función para ejecutar código y recuperar dinámicamente la fuente de una imagen. El siguiente fragmento de código muestra un ejemplo de lo que quiero:
<!-- "myFunction" exists in the current scope -->
<img ng-src="myFunction()" />
Estoy seguro de que esto tiene que ser simple, ¡pero simplemente no puedo encontrar nada en la documentación de ng-src ! ¿Alguien más ha golpeado esto?
¡Gracias por adelantado!
La Directiva (Ejemplo basado en respuestas)
Otros recomendaron una directiva. No puedo publicar el código del cliente, así que escribí un breve ejemplo de cómo se vería en Plunker ( ver aquí ). La directiva principal en sí es:
app.directive("imageSource", function (){
return { link: function (scope, element, attrs){
element.attr("src", scope.imageUrlArray[attrs.imageSource]);
}
};
});
Sé que lo que tengo aquí como ejemplo probablemente podría hacerse con la repetición ng usando la variable en un ng-src, pero sirve como un ejemplo de cómo sería una directiva si fuera necesario.
Bien, llegué al final:
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
<img ng-src="{{myFunction()}}" />