Question

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

今天的对象看起来像：

message = {
   message : X, 
}

我想做的事情如下：

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

1：

<div ng-if="message.message == 0" class="classA" style="">
  <span class="same"><img class="sameClass" ng-src="a.gif"></span>
  <span class="status-text a_with_animation" style="color:red;">textA</span>
</div>
<div ng-if="message.message == 1" class="classB" style="">
  <span class="same"><img class="sameClass" ng-src="b.png"></span>
  <span class="status-text" style="color:blue;">textB</span>
</div>1
<div ng-if="message.message == 2" class="classC" style="">
  <span class="same"><img class="sameClass" ng-src="c.png"></span>
  <span class="status-text" style="color:black;">TextC</span>
</div>

选项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>

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

Answer 1

不是很漂亮，但我举例说明了如何使用ng-include模板填充数据。这是一个演示：

<!DOCTYPE html>
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>
  <div ng-controller="myCtrl">

    <select ng-model="message" ng-change="change()" ng-options="x.message for x in messages">
</select>
    <br>
    ngInclude: <div ng-include="'abc.html'"></div>
    Directive: <div temp-directive></div>

    <!-- A separate file for the template -->
    <script type="text/ng-template" id="abc.html">
      <div class="{{obj.class}}" style="">
        <span class="same"><img class="sameClass" ng-src="{{obj.icon}}"></span>
        <span class="status-text {{obj.animation}}" ng-style="obj.style">
   {{obj.text}}</span>
      </div>
    </script>

  </div>

  <script>
    var app = angular.module('myApp', []);
    app.directive("tempDirective", function() {
        return {
            template : "<div class='{{obj.class}}' style=''><span class='same'><img class='sameClass' ng-src='{{obj.icon}}'></span><span class='status-text {{obj.animation}}' ng-style='obj.style'> {{obj.text}}</span></div>"
        };
    });

    app.controller('myCtrl', function($scope) {

      $scope.messages = [{
        "message": 0
      }, {
        "message": 1
      }, {
        "message": 2
      }];

      $scope.message = $scope.messages[0]; // initialise

      $scope.objects = [{
        "text": "Message - 0",
        "icon": "a.gif",
        "animation": "a_with_animation",
        "class": "classA",
        "style": {
          "color": "#00aaaa"
        }
      }, {
        "text": "Message - 1",
        "icon": "b.png",
        "animation": "",
        "class": "classB",
        "style": {
          "color": "#aa00aa"
        }
      }, {
        "text": "Message - 2",
        "icon": "c.png",
        "animation": "",
        "class": "classC",
        "style": {
          "color": "#aaaa00"
        }
      }];

      $scope.obj = $scope.objects[0]; // initialise

      $scope.change = function() { // changing the template data
        $scope.obj = $scope.objects[$scope.message.message];
      }

    });
  </script>

</body>

</html>

[注意]：最好将ng-include替换为template组件/指令（不 templateUrl ）用于性能改进，因为它是异步的并且需要时间来加载HTML

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

1 个答案: