相关疑难解决方法(0)

在讨论AngularJS的优点时,双向数据绑定经常被吹捧为Angular相对于其他JS框架的主要优点. 深入挖掘,文档表明这个过程是通过脏检查而不是通过事件驱动的措施来完成的.首先,似乎摘要循环的工作原理是在后台以周期性间隔触发方法,$watch在每个周期内检查所有es.然而,进一步阅读,似乎摘要循环实际上是由rootScope.digest()触发的$.apply,而触发又由事件(!)触发,例如通过调用的onClick事件ng-click.

但是,这怎么可能呢？我认为Angular 不使用更改侦听器.那么摘要循环真的如何运作？ Angular会在内部自动启动摘要循环,还是由事件触发的摘要循环？ 如果摘要循环自动运行,它运行的频率是多少？

一些澄清要点:

• 我不是在询问手动绑定到更改时摘要循环是如何运行的.在这种情况下,如果要强制使用摘要循环,可以通过调用来执行此操作$.apply()
• 我也没有询问digest循环响应用户事件的频率.例如,如果ng-model位于输入框中,Angular将在用户开始输入时启动摘要循环.令人困惑的部分是,为了知道用户正在打字,Angular是否在某处使用基于事件的 onKeyUp？
• 我已经知道每个摘要循环最多有10个循环的限制.我的问题不是关于每个摘要循环的循环次数,而是每秒运行的摘要循环次数.
• 额外问题:摘要循环与JavaScript事件循环有何关系？JS事件循环是否在后台定期运行？摘要循环与事件循环是一回事,但只在"角度上下文"中？这些完全不同的想法吗？

我是Web应用程序的新手,更具体地说是这种MV*模式.我们正在创建一个Web应用程序,我们正在考虑脱离jQuery,而不是完全,但我们正在尝试使用MVC,MVVM或MVP支持来实现客户端语言.基本上是将视图与模型分开的东西.作为这种MV*模式的新手我偶然发现了这个网站.

它基本上列出(差不多!)支持这种MV*模式的所有客户端语言/框架,在访问它之后我真的很困惑.因为根据这个网站..

在一天结束时,Ember.js是唯一拥有我想要的东西的框架.我最近将一个相对较小的Backbone.js应用程序移植到了Ember.js,尽管存在一些小的性能问题,但我对得到的代码库感到非常高兴.受到Yehuda Katz的支持,Ember.js周围的社区也令人惊叹.这绝对是值得关注的框架.

但在SO,我发现这个,这让我觉得,角度要好得多,而在如此反复,这和这这让我觉得这可能是骨干什么,我期待的.

更糟糕的是,测试表明结果完全不同.这里

http://jsfiddle.net/HusVw/1/ Backbone clear winner

http://jsfiddle.net/ericf/NrpcQ/ Backbone winner again

http://jsperf.com/angular-vs-knockout-vs-extjs-vs-backbone/2 angular winner for less data for more its knockout

http://jsperf.com/knockout-js-vs-direct-dom-manipulation/3 Backbone again

http://jsperf.com/angular-vs-knockout-vs-ember/33 no way its ember as the site mentioned

所以,基本上这一切都让我感到困惑,我无法决定我应该学习的网名,以及我应该在网站上实施什么.在测试中Backbone明显突出,但我听到了很多knockout,但我提到的SO链接说的是angular什么？我知道这可能取决于我目前正在开发的应用程序,但我想要一个更广泛的观点,不仅对这个项目有用,而且对于更长期的有用？在哪种情况下你更喜欢哪个框架？或者我应该只学习它们吗？(jk,在合理的时间内不能真正做到这一点.)

为了让事情变得更好,我听说飞镖,维基说...

Dart的目标是"最终取代JavaScript作为开放网络平台上Web开发的通用语言."

所以,如果js将被替换,为什么hack我甚至考虑学习这些js库/框架？

所以,基本上,它都搞砸了,我完全糊涂了？任何人都可以帮我决定吗？

我有一个带有分页网格的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秒.肯定是大的)？

有关此问题的改进解决方案,请参阅问题的底部

我现在已经尝试了一段时间来获得降落工作的指令.这是stackoverflow使用的完全相同的编辑器.Stackoverflow在此处提供此代码:

https://code.google.com/p/pagedown/

互联网上有一些版本,但都没有.我需要的是一个与所有编辑器按钮一起出现的内容,就像stackoverflow一样,当内联编码时,以及它作为ngRepeat的一部分内联时.

我希望这个指令在内联编码时使用,也可以在使用Angular 1.2.7版本的ng-repeat内部工作.我们需要的是,当模型数据发生变化时,指令需要更新页面向下视图以显示新的问题和答案.当用户更改向下翻页编辑区域时,指令需要能够更新模型.当用户单击[保存]时,需要将模型数据保存到数据库(或至少保存到另一个对象以确认其有效).

该指令需要能够响应模型中的更改,并在键盘上或在编辑窗格中按下"更改"按钮时将其原始数据保存到模型中.这是我到目前为止所拥有的.请注意,此版本没有$ wmdInput.on('更改',但它是需要的开始.

最重要的是我想使用Angular和jQuery 2.0.3的1.2.7版本.请注意,我发现版本1.2.2和1.2.7之间的非工作代码存在差异.我认为最好的解决方案适用于最新版本(1.2.7).

更新

我现在这个指令更简单,解决了我最近遇到的内容没有显示的问题.我强烈建议使用这个基于接受的答案的指令加上一些改进:https://github.com/kennyki/angular-pagedown

我对角度很新,但我觉得这有点疯狂.

我在一个控制器范围内通过ng-repeat显示了多个集合.每个列表都有一个输入字段来执行简单查询.我在我的代码中使用各种过滤器,最后在我的过滤器函数中放入了console.log.我意识到每次为一个列表调用我的过滤器函数时,都会调用该范围内的所有列表.此外,它每次调用过滤器功能两次.因此,使用3个集合,过滤其中一个列表将调用过滤器函数6次.

我想也许这只是我的自定义过滤器,所以我尝试了默认的过滤功能.相同的故事.这是我的代码:

https://dl.dropbox.com/u/905197/angular-filter-test.html

转到控制台,亲眼看看:/

我在这做错了什么？这看起来很简单,但它做了很多工作.

我当消化周期正在发生的事情很迷茫,是一种基于每50ms定时器它定期调用(因为它说,在这里,并暗示在这里),或者是每一个进入的角度范围内(因为它说,事件发生后呼吁在这里,在这里和这里)？

重要的例子:

在我的模型中,我有一个名为myVar3 的变量.在我的HTML中,我有{{myvar}}.触发按钮单击等事件并在控制器中引发处理程序,处理程序内的代码为:

$scope.myVar = 4;
// some heavy actions takes place for 3 seconds...
$scope.myVar = 5;

假设未阻止UI线程,用户在单击按钮后会看到什么？他会看到5或者他会看到4和3秒后5吗？

摘要

每次$ compile运行时,为什么以下plunkr会导致内存泄漏？

http://plnkr.co/edit/HhB4croPKuN5TP2NPqq6

代码说明

我正在编写一个有时需要完全重新呈现其HTML的指令.它通过将其模板生成为字符串,然后将该字符串提供给$ compile,最后使用jQuery删除旧DOM并将其替换为新呈现的元素来实现.

每次执行此操作时,应用程序都会泄漏几兆字节的内存,通常会导致浏览器崩溃.Chrome堆快照显示每次都会添加一个分离的DOM元素树,但Plunkr由于某种原因没有这个问题(虽然它仍然泄漏了很多).

我做错了什么导致内存泄漏？

"什么？生成一个字符串模板并重新编译它？为什么？"

我知道,这显然不是Angular指令的编写方式.我的第一种方法是ng-repeats与其他双向绑定的组合.不幸的是,这会导致性能问题,因为范围上的$ watch-statements数量会增加.关于为什么我选择这种方法的一些推理,我在这里给出一个小咆哮:数据绑定如何在AngularJS中工作？

编辑

我一直在努力,它不再泄漏记忆.我将保留这个问题,以防其他人发现它作为重新编译DOM的非泄漏方法很有用.

如何更新指令范围？

<div ng-controller="MyCtrl">
    <p t></p>
</div>

我的指示:

var myModule = angular.module('myModule', [])
    .directive('t', function () {
        return {
            template: '{{text}}',
            link: function (scope, element, attrs) {
                scope.text = '1';
                element.click(function() {
                     scope.text = '2';
                });
            }
        };
    })
    .controller('MyCtrl', ['$scope', function ($scope) {
    }]);

点击指令后不更新.

我不知道为什么会多次调用它.

<!doctype html>
<html ng-app="HelloApp">
<body>
  <test-directive></test-directive>
</body>
</html>

angular.module('HelloApp', [])
.directive('testDirective', function () {
    return {
        restrict: 'E',
        replacement: true,
        template: '<div ng-class="test()">Test Directive</div>',
        link : function (scope, element, attrs) {
            console.log('link');
            var cnt = 0;
            scope.test = function () {
                cnt += 1;
                console.log('test', cnt);
                //element.append('<h6>test' + cnt + '</h6>');
            }
        }
    }
});

控制台结果是

link
test 1
test 2
test 3

这是JSFIDDLE:http://jsfiddle.net/yh9V5/ 打开链接并查看console.log