标签: angularjs-ng-repeat

我们正在为一家银行建立的Angular应用程序冲击性能问题.

不幸的是,显示代码片段是违反合同的行为.无论如何,我可以描述一些正在发生的主要问题,我希望可以推荐最佳实践.

应用结构:

• 基本上,一个巨大的多表单页面.
• 每个表单都是它自己的部分,嵌套控制器和部分深度约为3级.
• 在json对象的集合上重复相同的形式.
• 每个表单都绑定到重复的对象/模型.
• 我们应该支持页面上1-200个表单的任何位置.

如果你看一下时间表.我们花了很多时间在jQuery解析html方法,jQuery重新计算stye方法,GC事件(垃圾收集).我想最小化这些应该可以加快速度.它们都是Angular生命周期的一部分,但可能有更好的方法来避免它们.以下是探查器的一些截图:

最终,随着重复形式的数量超过5,应用程序缓慢.每种形式与其他形式相对无关.我们已经尝试不在表单之间查看任何共享属性.

这是我的问题的演示.

$scope.myNumbers = [10, 20, 30];

<div ng-repeat="num in myNumbers">
    <input type="text" ng-model="num">
    <div>current scope: {{num}}</div>
</div>

任何人都可以向我解释为什么输入不可编辑/只读？如果按照设计,背后的理由是什么？

更新2/20/2014

看起来这不再是v1.2.0 + Demo的问题.但请记住,虽然用户控件现在可以使用较新的angularJS版本进行编辑,但它是子范围中的num属性,而不是父范围,可以进行修改.换句话说,修改用户控件中的值不会影响数组.myNumbers

在以下示例中:

  <li ng-repeat="item in items" ng-click="showItem(item)">
    <h3>{{item.title}}</h3>
    <button ng-click="remove(item)">Remove</button>
  </li>

当我点击按钮时,showItem()由于事件冒泡也会调用它.我知道我可以$event用来观察$event.currentTarget和做$event.stopPropagation()等等,但这非常难看.

顺便说一句.我不想停止传播button(在我的情况下button是一个twitter bootstrap dopdown/button- 这只是一个例子)

showItem()当我点击remove按钮时,如何停止调用？

编辑 丑陋的解决方案是:

function remove(item,$event){
  $event.originalEvent.prevent = true;
  // rest of the code
}

function showItem(item,$event){
  if($event.originalEvent.prevent)return;
  // rest of the code
}

以这个Plnkr为例.我不知道fooCollection会预先创建多少成员.所以我不知道bar会有多少型号存在.

但我知道它们将成为角度模型,我知道它们将会是什么样的.

我怎么做$watch这些？

我需要这样做,因为我需要在bar模型更改时触发行为.观看fooCollection本身是不够的,$watch听众在bar更改时不会触发.

相关的html:

<body ng-controller="testCtrl">
  <div ng-repeat="(fooKey, foo) in fooCollection">
    Tell me your name: <input ng-model="foo.bar">
    <br />
    Hello, my name is {{ foo.bar }}
  </div>
  <button ng-click="fooCollection.push([])">Add a Namer</button>
</body>

相关JS:

angular
.module('testApp', [])
.controller('testCtrl', function ($scope) {
  $scope.fooCollection = [];

  $scope.$watch('fooCollection', function (oldValue, newValue) {
    if (newValue != oldValue)
      console.log(oldValue, newValue);
  });
});

我有一个用AngularJS编写的webapp,它基本上将API轮询到两个端点.所以,它每分钟都会进行一次调查,看看是否有新的东西.

我发现它有一个小的内存泄漏,我已尽力找到它,但我无法做到.在这个过程中,我设法减少了我的应用程序的内存使用量,这很棒.

在没有做任何其他事情的情况下,每次调查你都可以看到内存使用量的增长(这是正常的)然后它应该下降,但它总是在增加.我从改变阵列的清洗[]到array.length = 0,我想我敢肯定,引用不持续存在,因此它不应该被保留的任何现象.

我也试过这个:https://github.com/angular/angular.js/issues/1522

但没有运气......

所以,这是两个堆之间的比较:

大多数泄漏似乎来自(数组),如果我打开,它是通过解析API调用返回的数组,但我确定它们没有被存储:

这基本上是结构:

poll: function(service) {
  var self = this;
  log('Polling for %s', service);

  this[service].get().then(function(response) {
    if (!response) {
      return;
    }

    var interval = response.headers ? (parseInt(response.headers('X-Poll-Interval'), 10) || 60) : 60;

    services[service].timeout = setTimeout(function(){
      $rootScope.$apply(function(){
        self.poll(service);
      });
    }, interval * 1000);

    services[service].lastRead = new Date();
    $rootScope.$broadcast('api.'+service, response.data);
  });
}

基本上,假设我有一个sellings服务,那就是service变量的值.

然后,在主视图中:

$scope.$on('api.sellings', function(event, data) {
  $scope.sellings.length = 0;
  $scope.sellings = data; …

我有一个控制器,我写的,我在多个地方使用我的应用程序ng-include和ng-repeat,就像这样:

<div
  ng-repeat="item in items"
  ng-include="'item.html'"
  ng-controller="ItemController"
></div>

在控制器/模板中,我希望item价值存在,而整个事物都围绕着这个想法.但是,现在,我需要以稍微不同的方式使用控制器,没有ng-repeat,但仍然需要能够传入item.我看到ng-init并认为它可以做我需要的,像这样:

<div
  ng-init="item = leftItem"
  ng-include="'item.html'"
  ng-controller="ItemController"
></div>
<div
  ng-init="item = rightItem"
  ng-include="'item.html'"
  ng-controller="ItemController"
></div>

但这似乎并没有奏效.任何人都有任何想法如何在像这样的单一实例中传入变量的范围？

编辑:上面的控制器正在加载leftItem和rightItem值,如下所示:

.controller('MainController', function($scope, ItemModel) {
    ItemModel.loadItems()
        .then(function(items) {
            $scope.$apply(function() {
                $scope.leftItem = items.left;
                $scope.rightItem = items.right;
            });
        });
});

Angular Documentation说: -

DOM的编译是通过调用$ compile()方法来执行的.该方法遍历DOM并匹配指令.如果找到匹配项,则将其添加到与给定DOM元素关联的指令列表中.一旦识别出给定DOM元素的所有指令,就按优先级对它们进行排序,并执行它们的compile()函数.

我认为ng-repeat指令的优先级低于自定义指令,在某些用例中,如动态id和自定义指令.角度是否允许修改指令的优先级来选择一个在另一个之前的执行？

我想使用ng-style基于它们的值有条件地设置表中数据元素的颜色.使用ng repeat生成每行数据.

所以我有类似的东西:

<tr ng-repeat="payment in payments">
  <td ng-style="set_color({{payment}})">{{payment.number}}</td>

和我的控制器中的功能,如下所示:

$scope.set_color = function (payment) {
  if (payment.number > 50) {
    return '{color: red}'
  }
}

我尝试过几种不同的东西.甚至将颜色设置为支付对象中的数据属性,但似乎我无法从数据绑定中处理数据,有没有人知道我可以使这个工作的方式？谢谢.

我有一个项目清单......

$scope.Users =[{
    UserName: ''
}];

在我看来,我想列出这样的假设我只有4个项目 $scope:Users

Username1, Username2, Username3 and Username4

<span data-ng-repeat="user in Users">{{user.Username}}</span>{{$last ? '' : ', '}}

上面的表达式基本上会在每个项目后添加逗号并且工作正常.

我的问题是如何and在最后一个项目之前添加一个关键字,所以它会像:

Username1, Username2, Username3 and Username4

代替:

Username1, Username2, Username3, Username4

我是React.js的新手.我试图绑定数据数组.我正在寻找相当于ng-repeat,但我在文档中找不到它.

例如:

var data =  ['red', 'green', 'blue']

使用角度我会在我的HTML中做这样的事情:

<div ng-repeat="i in data">{{i}}</div>

我想知道React的标记来做到这一点