相关疑难解决方法(0)

假设我有一个Javascript数组,如下所示:

["Element 1","Element 2","Element 3",...]; // with close to a hundred elements.

什么方法适合将数组块(拆分)到许多较小的数组中,比如最多10个元素？

我想调用一些jQuery函数以div为目标.该表填充了ng-repeat.

我打电话的时候

$(document).ready()

我没有结果.

也

$scope.$on('$viewContentLoaded', myFunc);

没有帮助.

在ng-repeat群体完成后,有没有办法正确执行功能？我已经阅读了关于使用自定义的建议directive,但我不知道如何将它与ng-repeat和我的div一起使用...

我有一个带有分页网格的AngularJS应用程序(两个嵌套的ng-repeat).一页有大约25x40个输入元素.在制作1000个绑定的开头,分页性能是可以接受的.

但随后页面增长的复杂性:动态类,不同的上下文菜单,网格的每个单元格的条件内容.并且估计有6000个绑定(每个输入元素6个),分页变得无法使用.

我的问题是:我如何处理AngularJS中的性能问题？明显的第一步是衡量.但Chrome Profiler的结果并没有告诉我那么多,远不知道如何继续.

 Self      Total                           Function
-----------------------------------------------------------------
24?ms    2.79?s    angular.js:7997         Scope.$digest
 1?ms       1?ms   controllers.js:365      setViewportData
16?ms     692?ms   angular.js:13968        ngRepeatWatch
 8?ms      22?ms   angular.js:6439         extend.literal
 9?ms    1.22?s    angular.js:14268        ngSwitchWatchAction
16?ms      45?ms   angular.js:12436        ngModelWatch
 0        621?ms   angular-ui-4.0.js:264   initDateWidget
 0         13?ms   angular.js:12859        ngClassWatchAction
 0         70?ms   angular.js:14184        ngStyleWatchAction
 1?ms       5?ms   angular-ui-4.0.js:261   getOptions
 0         16?ms   angular.js:579          copy
 0          1?ms   angular.js:4558         interpolateFnWatchAction
 1?ms       2?ms   angular.js:5981         token.fn.extend.assign
 0         37?ms   angular.js:8151         Scope.$eval
 1?ms       1?ms   angular.js:6137         extend.constant
14?ms      16?ms   angular.js:651          equals
 1?ms       1?ms   angular.js:4939         $interpolate.fn

旁白:'Object.observe()'是否有可能在未来加快速度(忽略'initDateWidget',这显然是一个不同的话题)？

这是小提琴:http: //jsfiddle.net/D5h7H/7/

它呈现以下内容:

<div ng-repeat="group in Model.Groups">
    <span>{{group.Name}}</span>
    <div ng-repeat="filter in group.Filters">
        <input type="checkbox" ng-model="filter.enabled">{{filter.Name}}
        <select ng-disabled="!filter.enabled">
            <option ng-repeat="value in filter.Values">{{value}}</option>
        </select>
    </div>
</div>

它是从服务器加载到json中然后呈现给用户的过滤器列表(在一个例子中,json就是在Fiddle中生成的).目前有6组30个过滤器,每个过滤器有15个选项元素.

在Firefox中,现在需要大约2秒来重绘UI.

对于角度js,这个时间还可以吗？有没有什么我做错了导致2秒.渲染(因为2000元素对我来说看起来不是一个大数字,但2秒.肯定是大的)？

在以下场景中我有角度的性能问题:

<div ng-repeat="a in array">
  <input ng-model="something">
</div>

我在我的控制器中编写了代码,用于ng-click更改数组以拥有不同的对象集.问题是,如果数组具有相当数量的对象,则点击不像我希望的那样响应(短暂延迟).

经过一番调查后,我发现$digest在我改变阵列后需要很长时间ng-click.所以我创建了这个简短的测试代码来重现它.

真正的应用场景是这样的:我有一个表,其中每一行代表一个可编辑的对象,每个对象有许多我想要编辑的不同字段.这样,每当我点击表格中的一行时,就会有另一个html,其中包含我对象属性上ng-repeat不同inputs的所有s .

有没有人知道如何提高效率？

谢谢

我一直在研究一个导致性能问题的复杂角度页面.为了突出问题,我在这里创建了一个小提琴http://jsfiddle.net/4ex2xgL1/3/.

本质上,性能问题是由具有函数的ng-class语句引起的.

<span class="done-{{todo.done}}" ng-class="myfunction()">{{todo.text}}</span>

跨度是ng-repeat.在运行小提琴时,可以看到ng-class在页面加载时被执行多次,并且在每个键上,它被调用与TODO列表中的项目数一样多的时间.

这是一个更简单的情况,在我的情况下,我的页面上有780个项目,该功能最终被评估为3000次!

我们看到的解决方案之一是打破范围,但它几乎会导致我的应用程序重写.

我们还尝试了https://github.com/Pasvaz/bindonce,但它似乎不适用于高度动态的内容.

有什么想法吗？

精简版

当UI路由器过渡到一个新的视图(在某些方面,我不完全了解使用ngAnimate),它增加了班ng-leave,并ng-leave-active到当前视图.它还添加了类ng-enter和ng-enter-active下一个视图.问题是转换是在下一个视图中的所有DOM更改完成之前开始的,从而导致转换不稳定.所以我的问题是; 是否可以防止添加ng-enter和ng-enter-active类,直到我决定添加它们(通过从控制器传输事件,等等)？

长版

我正在开发一个AngularJS应用程序,它使用ui-router和ng-animate进行转换.我遇到了一个小的性能问题,我真的想解决它,使应用程序运行更顺畅.

状态之间的转换似乎是口吃,我发现这可能是因为在过渡期间,Angular正在进行转换过程中进行DOM更改.

在进行转换之前,如何确保下一个视图中的DOM更改已完成？我正在使用ui-router的resolve函数和promise,以防止在加载数据之前发生转换.

我创建了一个JSFiddle来说明我的问题.单击链接以输入state2时,解析行需要一段时间才能解析数据(正如预期的那样).但是,在转换发生时似乎没有准备好DOM,因为转换可能非常滞后.这让我觉得在转换发生时DOM还没有准备好.

app.js

angular.module('myApp', ['ui.router', 'ngAnimate'])
.config(['$stateProvider',  
    function ($stateProvider) {
        $stateProvider
            .state('state1', {
                url: '',
                views: {
                    'main': {
                        templateUrl: "state1.html",
                        controller: function(){

                        }
                    }
                }
            })
            .state('state2', {
                url: '/state2',
                views: {
                    'main': {
                        templateUrl: "state2.html",
                        controller: function($scope, rows){
                            $scope.rows = rows;
                        },
                        resolve: {
                            rows: function($q){
                                var rows = [];
                                var deferred = $q.defer();

                                for (var …