Why Expressions are not dynamically updated in angular controller?

Question

Here in this code i have used two dynamic variables fbid and fburl. fburl is a expression using fbid.

$scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";

Here is my code.

// Code goes here
angular.module("testApp", [])
  .controller("testCtrl", function($scope) {
    $scope.fbid = "bennadel";
    $scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
    console.log($scope.fburl);
  })

<!DOCTYPE html>
<html ng-app="testApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="testCtrl">
    FacebookID<input type="text" ng-model="fbid" >
    <img ng-src= "{{fburl}}"/>
   <div>{{fburl}}</div>
  </body>

</html>

Now my question is when I am updating the fbid why fburl is not updating automatically ?

Angular not watch for setted values, you must say it.Using $scope.$watch — Jesús Quintana
– Jesús Quintana, Commented Feb 23, 2015 at 13:04

beije · Accepted Answer · 2015-02-23 13:05:22Z

It's because the value can't update after the fact, you need to add a watcher on the variable fbid.

AngularJS docuemntation for $watch

// Code goes here
angular.module("testApp", [])
  .controller("testCtrl", function($scope) {
    $scope.fbid = "bennadel";
    $scope.fburl = "";
    $scope.$watch('fbid ', function(newValue, oldValue) {
        $scope.fburl = "https://graph.facebook.com/"+newValue+"/picture?type=normal";
        console.log($scope.fburl);
    });
  })

<!DOCTYPE html>
<html ng-app="testApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="testCtrl">
    FacebookID<input type="text" ng-model="fbid" >
    <img ng-src= "{{fburl}}"/>
   <div ng-bind="fburl"></div>
  </body>

</html>

Zeeshan Hassan Memon · Accepted Answer · 2015-02-23 13:48:35Z

2

Alternate solution - cleaner way.

// Code goes here
angular.module("testApp", [])
  .controller("testCtrl", function($scope) {
    $scope.fbid = "bennadel";
$scope.fbFn = function() {
                return "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
            };
  })

<!DOCTYPE html>
<html ng-app="testApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="testCtrl">
    FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fbFn()}}"/>
    <div >{{fbFn()}}</div>
  </body>

</html>

Happy Helping!

answered Feb 23, 2015 at 13:48

Zeeshan Hassan Memon

8,3654 gold badges47 silver badges60 bronze badges

2 Comments

user3427540 Over a year ago

When you assigned a function to fbFn its work, but why its not working when I directly assign a the expression value to the variable?

Zeeshan Hassan Memon Over a year ago

when there is change in $scope.anyPropery ($scope.fbid in this case) $digest is run which causes all $scope-associated functions also run, that's why 'fbFn' is working here. I like this approach compared to setting $watch. You can understand more about $diget cycle working

Collectives™ on Stack Overflow

Why Expressions are not dynamically updated in angular controller?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related