angularJS ng的最佳实践和性能，如果带有类和图标

2种选择： 什么对性能和观察者使用更好，现在我使用第一个选项，我想提高性能

今天的对象看起来像：

message = {
   message : X, 
}

我想做一些事情，比如：

obj = {
   text : text,
   icon: "src.png"
   status: X,
   class : "className",
   color: "color_code_like_#ffff"
}

1：

textA
textB
1.
TextC

选择2

<div class="{{obj.class}}" style="">
  <span class="same"><img class="sameClass" ng-src="{{obj.class}}"></span>
  <span class="status-text {{obj.animation}" style="color:red;">
   {{obj.text}}</span>
</div>

{{obj.text}

---

另外，这里所有的数据都是双向绑定的

不是很漂亮，但我举了一个例子，说明如何使用

ng include

模板填充数据。下面是一个演示：

包括：
指令：
{{obj.text}
var-app=angular.module（'myApp'，[]）；
应用程序指令（“临时指令”，函数（）{
返回{
模板：“{obj.text}”
};
});
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.messages=[{
“消息”：0
}, {
“信息”：1
}, {
“信息”：2
}];
$scope.message=$scope.messages[0]；//初始化
$scope.objects=[{
“文本”：“消息-0”，
“图标”：“a.gif”，
“动画”：“带动画的动画”，
“类别”：“类别A”，
“风格”：{
“颜色”：“00aaaa”
}
}, {
“文本”：“消息-1”，
“图标”：“b.png”，
“动画”：“，
“类别”：“类别B”，
“风格”：{
“颜色”：“aa00aa”
}
}, {
“文本”：“消息-2”，
“图标”：“c.png”，
“动画”：“，
“类别”：“类别C”，
“风格”：{
“颜色”：“aaaa00”
}
}];
$scope.obj=$scope.objects[0]；//初始化
$scope.change=function（）{//更改模板数据
$scope.obj=$scope.objects[$scope.message.message]；
}
});

为什么不使用

ng类

？@AlekseySolovey。是的，这是一种选择。我问的是性能和观察器

ng如果

破坏DOM（速度慢），双向绑定（

{{{{}}

）会添加一个观察器。因此，可能最好使用

ng show

或（如果

message.message

没有更改并且是预定义的）单向数据绑定-

{{：：{}}

的

{{}

速度要慢得多。这个ng绑定是一个指令，将在传递的变量上放置一个观察者。因此，ng绑定仅在传递的值确实发生更改时才适用。另一方面，括号将在每个$digest中进行脏检查和刷新，即使它不是必需的。@AlekseySolovey我需要双向绑定这里非常感谢，我如何在指令中做到这一点？我的意思是当有变化时，我需要改变html。例如，我不想使用ng include，看这里：@Guz是的，我知道潜在的性能问题，但我只是不经常使用指令。您只需要一个

模板

（作为字符串），链接作用域对象（数组），正确限制和绑定它，然后调用a来更改模板数据（就像我的示例中的

）@Guz我尝试仅为模板添加一个简单指令。检查更新的代码如果它在templateURL而不是模板中，是否有任何区别？对于每种状态，这完全比使用ng if好？我有7种状态。因此，这意味着选项2更好，但事件虽然我没有看到wathcer的重要性，因为我试图减少这里的观察者

<div class="{{obj.class}}" style="">
  <span class="same"><img class="sameClass" ng-src="{{obj.class}}"></span>
  <span class="status-text {{obj.animation}" style="color:red;">
   {{obj.text}}</span>
</div>