如何在javascript数据字段中绑定AngularJs变量？

我想在javascript数据字段中绑定一个取自json文件的变量，但是我不能使用{{}}操作符，因为它是在之后处理的

<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>

我想我必须使用像ng bing这样的东西，之前已经处理过了，但我不知道如何处理

谢谢你的建议，很抱歉我的英语不好

编辑1

数据被正确检索，但在数据最终编号之后进行处理，因此他在开始处读取一个“”

我的json数据

{
"itemSold":1000
}

编辑2

这里是如何处理数据的最终编号

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');
                }
            }
        });
    });
});
};

---

大多数情况下都可以。如果您不想要任何

NaN

s，您有几个选择：

• 初始化范围变量，例如“待定…”
• 如果或

  ng show

• 更复杂的解决方案（如静止角度）

---

如果我理解正确，您希望在加载组件/指令/控制器后立即获得数据

在这种情况下-在控制器中使用resolve，它会将ajax请求的结果注入控制器，在加载控制器时，您将拥有所有数据

路由器

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

控制器

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;
  }
}]);

另一种方法是在元素上使用ng斗篷。它将隐藏元素，直到解析所有变量

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

---

希望有帮助。

显然，您正在尝试在解析

数据final number=“{{itemsaled}}}”

属性之前处理它。要在之后处理它，请确保仅在您检索到JSON数据并且AngularJS生命周期已经为您解决了它之后才调用处理程序。为此，您可以使用AngularJS的

$timeout

，因此它将在AngularJS操作后排队并执行

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);

  });
}]);

有关更多信息，请阅读：

我建议与

finalNumber

指令一起使用。每当有更新时，这将触发要执行的函数。也就是说，它不仅仅渲染一次，只要值发生变化，视图就会更新

.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
  };
});

当从jQuery背景移动到angular时，您需要改变您的心态。Angular是一个MVC框架，主要基于数据绑定。使用数据绑定时，视图不应关心更新模型的时间和方式，但每当有更新时，视图都应该知道，并相应地更新视图

上面的例子应该是使用angular的正确方法。但正如我所说的，将jQuery代码带到angular是一个相当复杂的过程，所有这些都应该作为指令来编写。我不确定您是否需要在第一次更新后只运行jQuery代码一次（多次运行可能会产生副作用）。你可能需要一点技巧。这是不推荐的，如果可能，您应该将所有这些作为指令编写（

滚动视图

，

动画

，

最终编号

，…）

---

我想把watch放在'itemsaled'变量上，每当从$http调用获取值时，我都会调用handlePageScrollContentAnimation处理程序

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
   }   
});

---

希望这对你有帮助。Thnaks.

您能显示您的json数据吗？GET请求后，

数据最终编号将更新。有什么问题吗？是的，可能需要注意更新指令中使用的数据最终编号？如果是，是什么指令？否，它由外部javascriptI使用，我尝试使用ng show、hide和If，它仍然给我NaN，但通过检查，我可以在数据最终编号字段中看到正确的编号
.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
      };
    });

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
   }   
});