AngularJS Tutorial - ng-src








We can use ng-src in place of src

Example

The following code shows how to ng-src.


<!doctype html>
<!--<!-- w  w  w . j a  v  a2s  .c o m-->
Created using JS Bin
http://jsbin.com

Copyright (c) 2014 by auser (http://jsbin.com/egucIqU/1/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>

  <h1>Wrong Way</h1>
  <img src="{{imgSrc}}" />

  <h1>Right way</h1>
  <img ng-src="{{imgSrc}}" />


  <script>
    angular.module('myApp', [])
    .run(function($rootScope, $timeout) {

      $timeout(function() {
        $rootScope.imgSrc = 'http://www.java2s.com/style/download.png';
      }, 2000);

    });
  </script>

</body>
</html>

The code above is rendered as follows: