小编fxc*_*xck的帖子
Angular.js更改了一个ng-repeat项,导致所有其他项运行过滤器
我仍然遇到同样的问题,ng-repeat中的过滤器和函数被称为所有该死的时间.
这里的示例,http://plnkr.co/edit/G8INkfGZxMgTvPAftJ91？p = preview,无论何时在单行上更改内容,someFilter过滤器都会被调用1000次.
显然这是因为子范围的任何更改都会冒泡到其父级,导致$ digest运行,导致所有过滤器运行(/sf/answers/1115545371/).是对的吗？如何在我的特定情况下防止它发生？
如何才能使其仅在已更改的项目上运行？
在我的实际用例中,即使在ng-repeat的项目上没有更改,也会调用过滤器,它是如此毫无意义,实际上会导致性能问题.
//编辑清除了来自探测器的所有不必要的东西 http://plnkr.co/edit/G8INkfGZxMgTvPAftJ91?p=preview
推荐指数
解决办法
查看次数
Angular.js内存泄漏,何时应该开始担心
所以我有这个相当大的应用程序建立在角度,很多嵌套状态,很多指令,数据表和东西.
我们最近决定切换到完整的单页,而不是几个小的单个应用程序部分(说文章,人,仪表板以前都是一个小的单页面应用程序),所以我开始处理性能更多.在Chrome中,你不会在视觉上注意到一个东西,另一方面我认为它随着时间的推移变慢.
所以我从三个快照技术开始,看看是什么.但我不完全确定该怎么做.
- 每个快照拍摄的快照大小都会增加一倍(第一个15mb,第二个67mb,第三个120mb),这是什么意思？
- 例如,有很多红色的dom,4000个红色的div
现在我觉得那些红色的div,spans和anchor主要是我的错,我正在做一些不那么平常的东西来渲染那些数据表,使用我制作的这个指令,我也觉得有些堆对象是结果这些dom元素没有被正确删除.
这就是table指令本质上的作用
var rows = '<div class="row" ng-repeat="item in items">';
_.each(columns, function(column) {
// pass cell as a string from $templateCache, instead of having <table-cell type="column.type"> which loaded correct templateUrl depending on what was passed via type attr
var cellTemplate = $templateCache.get(column.type);
rows += '<div class="column">' + cellTemplate + '</div>';
});
rows += '</div>';
// el is from directive link function
el.html(rows);
$compile(el.contents())(scope);
我之所以这样做的原因是因为当我尝试使用嵌套ng-repeat的行和列以及<table-cell>单元格的指令时,渲染时间太长,即使只有大约6列和50行.
所以我认为正在发生的是这个表中的所有div都没有被正确删除,所以每次这个表指令加载时它们都会堆叠起来.
现在即使我处理那个分离的dom树......那么所有其他的东西,我怎么知道我应该尝试和处理哪些,哪些是常用的角度并且不会真正影响性能？
//在plunker上编辑表格指令http://plnkr.co/edit/1fZi6mVn2jBIGF0Q2a40?p=preview
推荐指数
解决办法
查看次数
angular + redux/ngrx:状态更新与表单
首先,我正在使用:
- 重选选择器
- normalitr用于归一化和非规范化
- ngrx/store,它是redux的一个被动实现,用于状态管理
现在,类似于反应现实世界的例子,我有一片专用于实体的状态,这实际上是denormalize()normalizr工作方法的一个要求,因为文章可以有一个author,或者media都可以是实体本身.
这意味着当我选择一个user来自我的状态的单个时,我正在抓住这个全局的实体片段,我的选择器看起来像这样
export const getOne = createSelector(
getAllEntities,
getDetailId,
(entities, id) => denormalize(id, schema, entities)
);
然后从ngrx/store"选择"
state.map(getOne).distinctUntilChanged()
现在填写我的表格我这样做(半伪代码)
class Cmp {
form = new FormGroup({ /* whatever */});
user$ = this._store.map(getOne).distinctUntilChanged();
constructor(private _store: Store<AppState>) {
this.user$.subscribe((data) => {
this.form.patchValue(data);
});
}
}
结合重新选择和map/distincUntilChanged我几乎可以在任何实体更改时获得新的更新,所以请考虑这种情况..
- 您访问文章ID 5,它将填充订阅由全局实体切片组成的商店切片
- 你开始编辑"
text"FormControl - 其他人更改了ID为3的用户,并且您通过websockets接收更新,导致
subscribe触发(因为全局实体切片已更改)并覆盖您在编辑时更改的任何值,使用当前存储中的值(旧值)
..这个websocket有很多不同的情况可以导致更新更新.
在redux世界中是否有任何模式可以解决这个问题,或者ngrx世界中的任何人都必须处理这个问题？我想到的唯一明智的事情就是在输入时保存商店的任何价值,这需要挂钩角度反应形式来存储,这是屁股的巨大痛苦,并且ngrx /表格不会很快到来.但我确信有人必须已经提出了一些简单的解决方案.
谢谢!
(你可以阅读关于 …
推荐指数
解决办法
查看次数
youtube javascript API检测iOS设备上的全屏退出
我似乎无法弄清楚我应该为哪个元素添加事件监听器才能在iOS上工作,我正在听这些事件
['webkitfullscreenchange', 'mozfullscreenchange', 'fullscreenchange', 'MSFullscreenChange'];
并且听取document你传递给它们的元素和两个元素new YT.Player(),它们在桌面浏览器和Android浏览器上都很好,但是在iOS上都没有激发(chrome或safari,无关紧要).
你可以在这里查看它,在底部http://youtubeplayer.fxck.cz/ -1, 1, 2, 3是标准的youtube播放器事件,1337 fullscreenchange来自元素,1338 fullscreenchange来自document.
推荐指数
解决办法
查看次数
定位第n列(由列数计算)
假设我有这个
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
ul {
column-count: 2;
}
我想将第一列对齐,第二列对齐,是否有任何方法可以使用css选择器来定位其中一列？
推荐指数
解决办法
查看次数
angular2从`[ngTemplateOutlet]`返回"<template>"数据
所以我有一个组件 <template>
<some-component [data]="someArray">
<template>foo<template>
</some-component>
并且它正在使用它来获取模板
@ContentChild(TemplateRef)
public tmpl: TemplateRef<any>;
然后在它的模板中使用它
<div *ngFor="let item of someArrayFromDataInput">
<template [ngTemplateOutlet]="tmpl"></template>
</div>
现在我希望能够从item原始模板中打印一些数据,基本上能够做到这一点
<some-component [data]="someArray">
<template>foo {{ item }}<template>
</some-component>
有可能吗？
推荐指数
解决办法
查看次数
Angular.js和Google Analytics内容实验
因此,我正在尝试在一个有角度的单页网站的网站上实施谷歌分析内容实验.
我已经设置了两个版本的主页,因为/并/?v=2按照指示粘贴在谷歌代码中,位于<head>标签的最顶部并且工作正常,谷歌将30%的流量发送到第二个,70%的流量发送到第二个页面版本.
当我试图访问时,问题出现了/contact,谷歌显然会认为我仍在访问/并会发送给我/v=2(如果我是30%的一部分).
我甚至不确定它为什么会发生,但事实确实如此,我认为如果谷歌的功能在加载后不能正常运行,但只有在主页的角度controller加载后才会有所帮助..但我可以让谷歌代码工作在所述控制器..
有没有人以前处理过这个问题？
javascript google-analytics angularjs single-page-application google-experiments
推荐指数
解决办法
查看次数
Angular.js关闭,点击任何地方但在元素上
这很常见,比如你在这里点击stackoverflow上的收件箱.我会打电话给那个对话框或任何被打开的东西.
现在有两种方法可以解决这个问题,
- 你创建了一个不可见的叠加层,其中只有你打开的元素有更大的zindex,你通过点击叠加来关闭你的东西
- 单击文档上的事件,然后单击是否单击了您的项目或其外部,在这种情况下,您关闭了您的项目.
在任何一种情况下,我都希望ng-class用来添加/删除显示/隐藏事物的类.
现在我将如何使用angular进行此操作,因此它可以用于我可能添加的任何组件(事物).这不像我有单一的模态,我可能有不同的组件,具有不同的html结构,定位和东西.
哪种方法会更好,记录事件,重叠或其他什么呢？
由于angular实际上并没有对dom的任何引用,因此,文档方法可能是个问题,因为我无法确定是否点击了thing元素？除非我给所有的东西都是同一个班级..
另一方面,叠加方法不需要任何对dom元素的引用.
两种方法都需要在rootScope上使用一个唯一的var ng-class才能工作..这带来了是否使用ng-class或自定义的问题.
无论如何只是把我的想法扔到那里,也许我从一开始就认为它是错的,有没有人以前处理过这个？
推荐指数
解决办法
查看次数
使用BEM导航
我正试图绕过BEM,即使是最基本的东西,我也遇到了麻烦.比如菜单.
考虑这段代码
<ul class="menu">
<li class="menu__item">
<a href="/what">What</a>
</li>
<li class="menu__item">
<a href="/why">Why</a>
</li>
<li class="menu__item">
<a href="/how">How</a>
</li>
</ul>
ul是块,li是元素,但我该怎么做锚？既然我需要li和a风格,li必须至少被设计为内联,a必须是块和东西.我可以制作aa .menu_item,但是我如何设计那样li,因为我不应该在css中使用元素选择器,因为菜单块应该适用于任何html元素,就像.menu li {}我会决定使用说的那样div和a组合,无意义..
那么我该如何以"正确"的方式做到这一点呢？
推荐指数
解决办法
查看次数
谷歌地图中间的折线(质心？)
我有一个折线列表,就像谷歌地图一样,当我点击折线时我想要一个信息窗口显示我点击的位置,它可以很好地使用这个功能
function mapsInfoWindow(polyline, content) {
google.maps.event.addListener(polyline, 'click', function(event) {
infowindow.content = content;
infowindow.position = event.latLng;
infowindow.open(map);
});
}
问题来自于我点击列表(使用相同的功能),事件显然没有latLng,但我想infowindow无论如何都要显示在折线的中间,就像你做的那样点击我之前提到的谷歌地图链接中的列表.
试过LatLngBounds(); 但是这给了折线创建的区域的实际中心,而不是我需要的中间区域.
知道怎么做吗？
推荐指数
解决办法
查看次数
Angular.js更复杂的条件循环
目标是创造这个
<h3>11.4.2013</h3>
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
</ul>
<h3>10.4.2013</h3>
<ul>
<li>entry 4</li>
<li>entry 5</li>
<li>entry 6</li>
</ul>
由此
[
{
"name": "entry1",
"date": "11.4.2013"
},
{
"name": "entry2",
"date": "11.4.2013"
},
{
"name": "entry3",
"date": "11.4.2013"
},
{
"name": "entry4",
"date": "10.4.2013"
},
{
"name": "entry5",
"date": "10.4.2013"
},
{
"name": "entry6",
"date": "10.4.2013"
}
]
问题是ng-repeat必须打开,li所以我永远不能用ng-repeat做到这一点,是吗？我发现这个来自Mark Rajnoc的http://jsfiddle.net/mrajcok/CvKNc/示例,但它仍然非常有限......
我还有其他选择吗？写我自己的ng-repeat like指令？或者还有其他方法可以不写一个吗？
推荐指数
解决办法
查看次数
Angular.js缓存$编译模板/在ng-repeat内呈现指令的性能
我有一个渲染表格单元格的指令(请参阅我在这里编译它的方式,基本上使用$compile内部link fn Angular.js指令模板使用来自父/继承范围的变量),现在这用于两个ng-repeats,一个用于行,一个对于列,所以它基本上是
<ng-repeat row in rows>
<ng-repeat column in columns>
<my-cell-directive />
</ng-repeat>
</ng-repeat>
它有50行和8列,对(渲染)性能有很大的影响(无论如何都非常明显).
所以我一直在寻找一种方法来改进它.首先,我试图摆脱列的内部重复,创建一个my-cols-directive内部迭代列,找到他们的模板,创建一个字符串(内部有8列),然后编译它.其中将编译量从400降低到50.但它在渲染方面并没有明显改善(确实如此,但只有约15%).
现在我的另一个想法是将它减少到只有一个编译方式,基本上在ng-repeat的第一次迭代中编译它,然后保存(缓存)编译结果,这样指令就会使用它而不是一遍又一遍地编译它,只需用当前迭代中的绑定值替换绑定值.
有可能以某种方式吗？或者还有其他方法可以提高渲染速度吗？
javascript performance compilation angularjs angularjs-directive
推荐指数
解决办法
查看次数
Angular.js $监视表单/表单输入有效性
有什么特别的理由说这款深表不会发射吗？
http://plnkr.co/edit/6FxMS4RlfljBMkprZYQs?p=preview
可能是手表没有检查角度属性吗？IE浏览器.那些用美元乞讨？如果是这种情况,有没有办法观察有效性变化,而不仅仅是在表格上,而是在任何输入上？
推荐指数
解决办法
查看次数
标签 统计
javascript ×9
angularjs ×7
angular ×2
css ×2
bem ×1
compilation ×1
css3 ×1
events ×1
google-maps ×1
html ×1
ios ×1
jquery ×1
loops ×1
memory-leaks ×1
ngrx ×1
overlay ×1
performance ×1
redux ×1
rxjs ×1
sass ×1
youtube ×1
youtube-api ×1