Question

我有一个AngularJS应用程序。初始化控制器时，我的应用程序在作用域上定义了以下JSON数组：

$scope.orders= [
  { isSelected:false, quantity:0, price:1.33, name:'', description:'' },
  { isSelected:false, quantity:0, price:2.54, name:'', description:'' }
];

...

var addOrder = function() {
  $scope.orders.push({ isSelected:false, quantity:0, price:getPrice(), name:getName(), description:getDescription() });
};

我正在显示这样的订单：

<ul class="list">
  <li ng-repeat="order in orders">
    <div>
      <h2>{{order.name}}</h2>
      <p>{{order.description}}</p>
    </div>
  </li>
</ul>

每当调用addOrder时，对象都会被添加到订单集合中。但是，该更改不会反映在UI中。如何让更改反映在UI中？

由于

Answer 1

更新范围需要

$scope.$apply()。当您使用Angular THINGS（如指令），ng-*事件，$timeout，$http等时，它们会预先包装此函数。当你在Angular的世界之外工作时，你需要在更新范围时开始告诉它。

这里有一个很好的概述：http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

小心将它简单地粘贴在泛型函数中 - 如果它们被Angular THINGS以及vanilla JS事件调用，那么你会遇到问题（在$ apply中调用$ apply）。将$apply()与需要的内容相关联：

.directive( 'myDir', [ function() {
    return {
        link: function( scope ) {

            ( scope.myFunc = function() {

                // scope.$apply(); would cause error
            })();

            angular.element( window ).bind( 'resize', function(){ scope.$apply( scope.myFunc )});
        }
    }
}]);

模仿ng-repeat中的集合变化

1 个答案: