web-dev-qa-db-fra.com

Comprendre AngularJS ng-src

Comme expliqué ici , la directive angularjs ng-src est utilisée pour empêcher le navigateur de charger la ressource (par exemple l'image) avant que le guidon soit analysé. J'utilise actuellement le code suivant:

<div ng-controller="MyCtrl">
  <img ng-src="http://localhost:8081/media/{{ path }}" />
</div>

Avec le JS suivant:

function MyCtrl($scope, $timeout) {
    $timeout(function () {
        $scope.path = 'images/23694c70-04d7-11e3-9ba8-73fb00de24c4.png';
    }, 1000);
};

Le chemin est en cours de récupération à partir d'un service Web. En raison de ce délai, le navigateur essaie de charger http://localhost:8081/media/, ce qui provoque un 404. Une fois le chemin récupéré, le navigateur émet la requête correcte et charge l'image.

Quelle est la méthode préférée pour empêcher le chargement de ressources tant que toutes les données ne sont pas prêtes?

Veuillez voir jsfiddle pour un exemple illustrant ma situation.

Merci,

Martijn

angularjsdirective
30
Martijn

Mettez le chemin entier à l'intérieur de la variable $ scope. De cette façon ng-src attendra que vous lui fournissiez le chemin d'accès complètement résolu à l'image:

<div ng-controller="MyCtrl">
  <img ng-src="{{ path }}" />
</div>

function MyCtrl($scope, $timeout) {
    var path = 'https://si0.twimg.com/profile_images/';
    $timeout(function () {
        $scope.path = path + '2149314222/square.png';
    }, 1000);
};

VIOLON

38
Stewie

Info par exemple

Prenons ceci blogitem directive. Les exemples ci-dessus vous montrent déjà comment définir une valeur par défaut.

HTML: 

<blogitem ng-repeat="item in items" 
          bg-src="{{ item.image }}" 
          caption="{{ item.title }}"/>

JS: 

.directive( 'blogitem', function()
{
    return {
        restrict    : 'E',
        templateUrl : 'js/app/directives/blogitem.html',
        replace     : true,
        // pass these two names from attrs into the template scope
        scope       : {
            intro : '@',
            bgSrc : '@'
        }
    }
} )

( Modèle HTML: 

<article>
    <img ng-src="{{ bgSrc }}"/>
    <p>{{ intro }}</p>
</article>

J'espère que cela vous aidera par votre compréhension des ng-src.

3
Skid Kadda

J'ai également touché le même problème. Une chose que j'ai remarquée est que si la valeur de ng-src n'est pas définie, aucune img n'est récupérée. Par conséquent, j'ai créé une méthode utilitaire pour concaténer deux arguments et renvoyer une valeur si et seulement si les deux arguments sont définis. Voir ci-dessous.

<div ng-controller="MyCtrl">
  <img ng-src="{{MyUtil.strConcat('http://localhost:8081/media/', path)}}" />
</div>

myApp.factory('MyUtil', function() {
    return {
        strConcat: function(str1, str2) {
            return (angular.isDefined(str1) && angular.isDefined(str2)) ? 
                (str1 + str2) : undefined;
        }
    }
});

function MyCtrl($scope, $timeout, MyUtil) {
    $scope.MyUtil = MyUtil;
...
}

VIOLON

2
Amir

Vous pouvez définir le ng-src dans une chaîne vide si les données n'ont pas encore été renseignées:

<div ng-controller="MyCtrl">
  <img data-ng-src="{{ path && 'http://localhost:8081/media/'+path || '' }}" />
</div>

lorsque path n'est pas initialisé, la condition court-circuite et passe à la partie or et définit le data-ng-src à '' (chaîne vide), ne frappant donc pas le serveur.

0
kumarharsh

Dans la dernière version, vous pouvez l'évaluer comme ceci:

ng-src="{{ methodThatReturnsString() }}"
0
Jon O'Donnell