ng-angular: Angular JS - Use ng-src and ng-href instead of src and href

The data binding to an <img> or <a> tag, using {{ }} in the src or href attributes will not work well. Browsers load images in the same time with other content, so Angular cannot resolve data binding requests. So, when you need to use src or href, you better use the Angular, ng-src, and ng-href. Below, is a simple example:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../angular/angular.min.js"></script>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link href="../bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
<script>
angular.module("atpModule", [])
.controller("atpCtrl", function ($scope) {
$scope.atp = [
{ photo: 'rafa.png',
weburl: 'http://www.atpworldtour.com/Tennis/Players/Top-Players/Rafael-Nadal.aspx' },
{ photo: 'novak.png',
weburl: 'http://www.atpworldtour.com/Tennis/Players/Top-Players/Novak-Djokovic.aspx' },
{ photo: 'roger.png',
weburl: 'http://www.atpworldtour.com/Tennis/Players/Top-Players/Roger-Federer.aspx' },
{ photo: 'stan.png',
weburl: 'http://www.atpworldtour.com/Tennis/Players/Top-Players/Stan-Wawrinka.aspx' },
{ photo: 'david.png',
weburl: 'http://www.atpworldtour.com/Tennis/Players/Top-Players/David-Ferrer.aspx' },
{ photo: 'tonga.png',
weburl: 'http://www.atpworldtour.com/Tennis/Players/Top-Players/Jo-Wilfried-Tsonga.aspx' },
{ photo: 'simon.png',
weburl: 'http://www.atpworldtour.com/Tennis/Players/Top-Players/Gilles-Simon.aspx' },
{ photo: 'lopez.png',
weburl: 'http://www.atpworldtour.com/Tennis/Players/Top-Players/Feliciano-Lopez.aspx' },
{ photo: 'julien.png',
weburl: 'http://www.atpworldtour.com/Tennis/Players/Top-Players/Julien-Benneteau.aspx' },
{ photo: 'verdasco.png',
weburl: 'http://www.atpworldtour.com/Tennis/Players/Top-Players/Fernando-Verdasco.aspx' },
{ photo: 'mayer.png',
weburl: 'http://www.atpworldtour.com/Tennis/Players/Top-Players/Leonardo-Mayer.aspx' }
];
});
</script>
</head>
<body>
<div ng-app="atpModule" ng-controller="atpCtrl">
<div ng-repeat="item in atp">
<div style="float: left;">
<a ng-href="{{item.weburl}}">
<img ng-src="./images/{{item.photo}}" width="100" height="100">
</a>
</div>
</div>
</div>
</body>
</html>

ng-angular

Angular JS Magazine

marți, 30 decembrie 2014

Angular JS - Use ng-src and ng-href instead of src and href

Niciun comentariu:

Trimiteți un comentariu