AngularJS - two way binding not working using service

Question

I am learning Angular using W3Schools.

I just modified an example about "Services"... The following is the code:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

<p><input type="text" ng-model="num"></p>
<h2>{{num}}</h2>
<h1>{{hex}}</h1>

</div>

<p>A custom service whith a method that converts a given number into a hexadecimal number.</p>

<script>
var app = angular.module('myApp', []);

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.num = 200;
  $scope.hex = hexafy.myFunc($scope.num);
});
</script>

</body>
</html>

When I update the textbox, the "HEX" part is not updating. Why?

Basant Singh · Accepted Answer · 2016-08-19T11:31:12.803

Your hexafy.myFunc is called only once when the controller is initialized, hence only the initial value is converted to hex. If you want a function to be called on the value change of a scope variable in runtime, you need filters. AngularJS has a lot of inbuilt filters that are ready to use. You can also define a custom filter, just like you define services or controllers.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

<p><input type="text" ng-model="num"></p>
<h2>{{num}}</h2>
<h1>{{num | hexafy}}</h1>

</div>

<p>A custom filter that converts a given number into a hexadecimal number.</p>

<script>
var app = angular.module('myApp', []);

app.filter('hexafy', function() {
    return function (x) {
        return Number(x).toString(16);  // Also convert the string to number before calling toString.
    }
});
app.controller('myCtrl', function($scope) {
  $scope.num = 200;
  //$scope.hex = hexafy.myFunc($scope.num);
});
</script>

</body>
</html>

Further reading: AngularJS Filters

NOTE: A filter is a good idea if you're gonna be using the hexafy functionality at multiple places in/across views. Otherwise, it is just an overkill and the $scope.$watch method will work fine for you, as described in other answers

score 1 · Answer 2 · answered Aug 19 '16 at 11:24

$scope.hex is not updating because there're no way for it update itself.

The hexafy.myFunc is called only once when the controller is loaded for the first time.

If you want want the $scope.hex property to change with num, you might need a watch on the num property.

$scope.$watch('num', function(newVal, oldVal) {
$scope.hex = hexafy.myFunc($scope.num); /// or newVal
}

The function passed in $scope.$watch will be called everytime the value of $scope.num changes.

for more info see https://docs.angularjs.org/api/ng/type/$rootScope.Scope (the watch section)

Hope it helps.

score 0 · Answer 3 · answered Aug 19 '16 at 11:23

No need of a service here, you can simple use $watch on the num. See below code snippet, it will update your ui, I have updated your controller code, please check.

app.controller('myCtrl', function($scope, hexafy) {
        $scope.num = 200;
        $scope.hex = "some default val";

        $scope.$watch('num', function(newValue, oldValue) {
            $scope.hex = newValue.toString();
        });

});

score 0 · Answer 4 · edited May 23 '17 at 11:51

0

Your Text box is only bind to 'num'.
'$scope.hex is not binded to your text box'. So that it is not update when you typing text. You could use '$watch' on 'num'. Read here

app.controller('myCtrl', function($scope, hexafy) {

  $scope.num = 200;
  $scope.$watch('num', function() {
      $scope.hex = hexafy.myFunc(parseInt($scope.num));

  });
});

edited May 23 '17 at 11:51

Community

1
1

answered Aug 19 '16 at 11:32

rajagopalx

3,012
9
41
52

AngularJS - two way binding not working using service

4 Answers4