Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Thread Contributor: Ravishankar ChavarePart 6.7-ng-src Directives
#1
ng-src Directives



-The main reason to use ng-src instead of src to solve the problem where original src attribute doesnt work its give error in console.
-Replace ng-src directive with a lain old src attribute of an <img> tag.
-ng-src directive shoud be used instead of src if you writing angular js code.
-ng-src ensure that the image is not displayed wrong before angular code evaluated.


Example or src attribute of <img> tag

Code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="../angular.min.js"></script>
    <title>ng-src</title>
    <script type="text/javascript">
        
        var app=angular.module("myApp",[]);
        app.controller("mycontroller",function($scope){
                $scope.imageurl="imagelink.png"
        });
    </script>
</head>
<body ng-controller="mycontroller">
<img src="{{imageurl}}">

</body>
</html>


OUTPUT:
[Image: 0Lo8mmn]


TO solve above problem in angular js we use ng-src directive instead of using only src attribute.
Code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="../angular.min.js"></script>
    <title>ng-src</title>
    <script type="text/javascript">
        
        var app=angular.module("myApp",[]);
        app.controller("mycontroller",function($scope){
                $scope.imageurl="imagelink.png"
        });
    </script>
</head>
<body ng-controller="mycontroller">
<img ng-src="{{imageurl}}">

</body>
</html>


OUTPUT:[Image: 8t5aTib]
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)