Menu
I have been trying to bind a value to the ng-src of an img HTML element to no avail.
HTML code:
<div ng-controller='footerCtrl'> <a href="#"><img ng-src="{{avatar_url}}"/></a> </div> AngularJS code:
app.controller('footerCtrl',function($scope, userServices) { $scope.avatar_url=''; $scope.$on('updateAvatar', function() {$scope.avatar_url = userServices.getAvatar_url();} ); } app.factory('userServices', function($rootScope){ var avatar_url=''; return{ setAvatar_url: function(newAvatar_url) { avatar_url = newAvatar_url; $rootScope.$broadcast('updateAvatar');}} ); I would like to update the avatar_url variable in the ng-src every-time its respective variable(avatar_url) in the user Service is updated. The variable in the user Service is updated through a http.POST request to the server. I have checked that the response from the server does update the variable in the user Service which is then broadcast to the avatar_url variable in the footerCtrl.
However, the image element HTML does not reflect the changes at all. In fact, I have also tried to preset the avatar_url variable to a relative path to one of the pictures in my page, the image still shows nothing(the ng-src value is empty). T
898
AngularJS ng-src Directive The ng-src directive overrides the original src attribute of an <img> element. The ng-src directive should be used instead of src if you have AngularJS code inside the src value. The ng-src directive makes sure the image is not displayed wrong before AngularJS has evaluated the code.
ng-click is an attribute of an HTML element that can be used for the customized components in Angular. We use this attribute to detect if an element is clicked and tracks the mouse's cursor. ng-click takes a function as an attribute and calls it whenever an element is clicked.
Data binding in AngularJS is the synchronization between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.
AngularJS applications are controlled by controllers. The ng-controller directive defines the application controller. A controller is a JavaScript Object, created by a standard JavaScript object constructor.
Changing the ng-src value is actually very simple. Like this:
<html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> </head> <body> <img ng-src="{{img_url}}"> <button ng-click="img_url = 'https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg'">Click</button> </body> </html> Here is a jsFiddle of a working example: http://jsfiddle.net/Hx7B9/2/
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
