小编Dan*_*olf的帖子

我正在使用AngularJS版本1.0.5和Angular UI(Bootstrap)0.4.0.我正在尝试集成两个功能:UI的选项卡和Angular的形式.

我有嵌套表格.一个表单(outerForm)包装整个tabset.另一种形式(innerForm)位于一个选项卡中.

我希望在选项卡之外有一个按钮,根据innerForm的有效性启用\禁用!

当我尝试从表单本身外部访问innerForm.$有效时,它不起作用.

这是一个吸烟者:http://plnkr.co/edit/sEz8TG？p = preview

现在,当我尝试使用常规Bootstrap时,它似乎确实有效:http: //plnkr.co/edit/Somic4？p = preview

当内部表单位于常规div中时,我可以从外部访问它.当我使用Angular UI的特殊"tab"语法时,它不再起作用.

我正在使用AngularJS 1.0.8.

问题:我有一个动态网站,可以从各种组件或小部件构建:段落,文本块,图像,超链接和表格.段落是更多组件的容器.表也​​是一种容器 - 它可以容纳其他组件,并将它们排列为数据网格.

该网站不是静态的,即我没有这种组件的预定义布局.相反,我在启动时获得了一个JSON,它指定了组件的布局.

最初,我有一个每个这样的组件的指令,使用该指令的模板,偶尔使用$ compile为更复杂的组件更改DOM.对于'容器'组件 - 段落和表 - 我使用ngRepeat来呈现该容器组件中包含的所有组件.

这在性能方面存在问题.这个网站需要花费很多秒才能在Chrome/Firefox上加载,花费的时间主要集中在AngularJS渲染机制上(不是IO,我想).

所以我决定改变这些组件的指令.而不是使用ngRepeat,这不是真正必要的,因为我不需要双向绑定(网站中的内容不是交互式的,无法更改,所以我只需要渲染一次,非常像servlet ) - 我自己在指令中构建了HTML字符串,使用普通的JS,迭代模型中存在的所有包含的组件,最后我编译并链接它.

结果再也不够好了.对于一些数量较少的细胞表,在现代Chrome/Firefox中连接约500 milis,在IE9中连接约4000 mil,在IE8中约需15,000 milis,IE7仍在渲染,所以我无法给你时间:)

我认为问题可能在于广泛使用指令.
一个简单的:

<div my-table-component data="data"></div>

在链接之后,元素将在<table>带有30-40个<tr>标签的标签中产生,每个标签有10个<td>标签,并且每个标签中都会有一个额外的<div my-text-component>或者<div my-image-component>必须自己编译和链接(因为它有一个指令).

我虽然因为我的网站开头并不是互动的,所以我真的不需要这个.也许我可以避免为每个组件使用指令,只留下容器组件的指令.在这些指令中,我将创建每个可能的其他组件的实际HTML模板,而不是使用那样做的指令.

这让我从AngularJS的想法向另一个步骤转向了servlet的想法.它有点糟糕.所以也许你们其中一个人可以为我提供更好的方法......也许性能问题甚至不存在？即使有这么多的项目,也许使用指令(并希望ngRepeat)可以很好地表现性能？除了使用Chrome的开发者工具,Firebug和Chrome的Batarang AngularJS扩展(没有一个真正指导我以高效的方式)之外,也许有更好的方法来制作富有洞察力的性能基准测试.