How to bind AngularJs variable inside javascript data field?

Question

I would like to bind a variable took from a json file inside a javascript data field, but i can't use the {{}} operator because it's processed after.

<div class="milestone">
  <div class="number" data-animation="true" data-animation-type="number" data-final-number="{{itemSold}}"></div>
  <div class="title">Items Sold</div>
</div>

In this way it gives to me a NaN because he can't see the value of itemSold.

This is how itemSold is retrived

var app = angular.module('app', []);
app.controller('AppCtrl', ['$scope', '$http', function($scope, $http) 
{
  $http.get('app/shared/homeStatistics.json').success(function(data){
   $scope.itemSold = data.itemSold;
   $scope.themeAndTemplate = data.themeAndTemplate;
   $scope.members = data.members;
  });
}]);

I think that i have to use something like ng-bing that is processed before, but i dont know how.

Thanks for all suggestions and sorry for my bad english

EDIT 1

The data are correctly retrieved but are processed after the data-final-number so he read a "" at the beginning

my json data

{
"itemSold":1000
}

EDIT 2

here it how it is processed the data-final-number

var handlePageScrollContentAnimation = function() {
$('[data-scrollview="true"]').each(function() {
    var myElement = $(this);

    var elementWatcher = scrollMonitor.create( myElement, 60 );

    elementWatcher.enterViewport(function() {
        $(myElement).find('[data-animation=true]').each(function() {
            var targetAnimation = $(this).attr('data-animation-type');
            var targetElement = $(this);
            if (!$(targetElement).hasClass('contentAnimated')) {
                if (targetAnimation == 'number') {
                    var finalNumber = parseInt($(targetElement).attr('data-final-number'));
                    $({animateNumber: 0}).animate({animateNumber: finalNumber}, {
                        duration: 1000,
                        easing:'swing',
                        step: function() {
                            var displayNumber = handleAddCommasToNumber(Math.ceil(this.animateNumber));
                            $(targetElement).text(displayNumber).addClass('contentAnimated');
                        }
                    });
                } else {
                    $(this).addClass(targetAnimation + ' contentAnimated');
                }
            }
        });
    });
});
};

The `data-final-number` will be updated after your GET request. What's the problem? — Blackhole, Jan 09 '15 at 13:55
Is `data-final-number` used in a directive? If yes, what directive? — tasseKATT, Jan 09 '15 at 14:04
In angular, you should use a directive for this kind of thing, and most likely a directive already exists that does what you'd like to do. Please tell us what you're trying to achieve. It looks like some kind of counter for the total amount of items sold? Maybe http://stackoverflow.com/questions/21252936/angularjs-counter-to-count-up-to-a-target-number is of use or http://www.andrewboni.com/2014/09/03/a-countupjs-angularjs-directive/ ? — flup, Jan 19 '15 at 08:31

Khanh TO · Answer 1 · 2015-01-17T09:59:55.033

I suggest using attr.$observer with a finalNumber directive. This will trigger a function to be executed whenever there is an update. With that said, it's not only rendered one time, whenever the value changes, the view is updated.

.directive('finalNumber',function() {

  function link(scope, element, attrs) {
    $attrs.$observe('finalNumber', function(value) {
       if (!isNaN(value)){
          //update accordingly, it's kind of hack to
          //bring this code to angular. It's better to write all these
          // as angular directives.
          handlePageScrollContentAnimation(); 
       }
    });
  }

  return {
    link: link
  };
});

You need to change your mindset when moving to angular from jQuery background. Angular is an MVC framework and based mainly on databinding. With data binding, the view should not care when and how the model is updated, but whenever there is an update, the view should be aware of it and update the view accordingly.

The above example should be the right way to work with angular. But as I said, bring your jQuery code to angular is quite a hack, all these should be written as directives. I'm not sure whether you need to run your jQuery code only once (running multiple times may cause side effects) after the first update. You may need a bit of hack. This is not recommended and if possible, you should write all these as directives (scrollview,animation,finalNumber,..)

.directive('finalNumber',function() {

      function link(scope, element, attrs) {
        var hasRun = false;//hack the code to run only once.
        $attrs.$observe('finalNumber', function(value) {
           if (!isNaN(value) && !hasRun){
              //update accordingly, it's kind of hack to
              //bring this code to angular. It's better to write all these
              // as angular directives.
              handlePageScrollContentAnimation(); 
           }
        });
      }

      return {
        link: link
      };
    });

score 0 · Answer 2 · answered Jan 09 '15 at 14:15

0

It's OK in most cases. If you don't want any NaNs, you have few options:

Initialize scope variables with, e.g., 'Pending...'
Wrap it with ng-if or ng-show
More complicated solutions (e.g. rest-angular)

answered Jan 09 '15 at 14:15

Unrealsolver

143
4

I tried with ng-show, hide and if and it still gives to me NaN, but making an inspection i can see the correct number inside the data-final-number field – Oxenarf Jan 09 '15 at 14:28

score 0 · Accepted Answer · answered Jan 16 '15 at 08:11

If I understood you correctly, you want to have the data just after the component/directive/controller is loaded.

In that case - use resolve in controller, it will inject the result of your ajax request into controller and by the time controller is loaded you'll have all the data.

Router

app.config(function ($routeProvider) {
  $routeProvider
    .when('/',
    {
      templateUrl: "app.html",
      controller: "AppCtrl"
      resolve: {
        statResponse: function () {
          return $http.get('app/shared/homeStatistics.json');
        }
      }
    }
  )
});

Controller

app.controller('AppCtrl', ['$scope', 'statResponse', function($scope, statResponse) 
{
  if(statResponse && statResponse.status === 200) {
   $scope.itemSold = statResponse.data.itemSold;
   $scope.themeAndTemplate = statResponse.data.themeAndTemplate;
   $scope.members = statResponse.data.members;
  }
}]);

Another way is to use ng-cloak on the element. It will hide the element until all variables are resolved.

<div class="number" ng-cloak data-animation="true" data-animation-type="number" data-final-number="{{itemSold}}"></div>

Hope that helps.

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

Apparently, you're trying to handle the data-final-number="{{itemSold}}" attribute before it has been resolved. To handle it after, make sure to only call the handler after the you have retrieved the JSON data and the AngularJS lifecycle have resolved it already for you. To do that, you can use AngularJS's $timeout, so it will be enqueued and executed after AngularJS manipulation.

var app = angular.module('app', []);
app.controller('AppCtrl', ['$scope', '$http', function($scope, $http, $timeout) 
{
  $http.get('app/shared/homeStatistics.json').success(function(data){
   $scope.itemSold = data.itemSold;
   $scope.themeAndTemplate = data.themeAndTemplate;
   $scope.members = data.members;

   //calling handler after AngularJS applied all two-way-bindings
   $timeout(function() {
     handlePageScrollContentAnimation();
   }, 0);

  });
}]);

For further information, read: Anyway to trigger a method when Angular is done adding scope updates to the DOM?

Pankaj Parkar · Answer 5 · 2015-01-18T13:01:11.913

I'd like to put watch on 'itemSold' variable and whenever value fetched from $http call, i'll call handlePageScrollContentAnimation handler.

var watchItemSold = $scope.$watch('itemSold', function(newVal, oldVal, scope){
   if(newVal != oldVal){
      handlePageScrollContentAnimation(); //call handler
      watchItemSold(); //watch destructor will ensure that handler will call once
   }   
});

Hope this will help you. Thnaks.

How to bind AngularJs variable inside javascript data field?

5 Answers5