Question

我有一个角度指令，可以将世界上所有国家/地区加载到md-select中。我的页面可以有很多这些国家选择。

我的问题是，当我在页面上有很多这些指令时，页面会慢下来并冻结。这是由于加载了指令。

由于指令一旦完成就不会改变，我想知道是否有一种缓存编译输出的方法，使得指令几乎就像一个静态控件？

我正在尝试在此处创建此演示：http://plnkr.co/edit/1ivHtxQ0bGnnvqy4usrj

＆＃13;

var app = angular.module('plunker', [])
 .controller('MainCtrl', function($scope) {
  $scope.rows = _.range(50);
  $scope.columns = _.range(8)
})
.directive('myCellDirective', function($compile){
  var compiled = $compile('<span>{{row}}*{{column}}={{row*column}}</span>');
  return {
    link:function(scope,element,attrs){
      compiled(scope,function(clonedElement){
        element.append(clonedElement)  
      });
    }
  }
})
.directive('listCountry', function() {
  var countries = [240];
  for (i=0; i<240; i++) {
    countries[i] = i;
  }
  return {
    template: `template starts here
              <br /><md-select ng-model="countryToSelect">
                <md-option ng-repeat="item in countries" 
                    value="{{item}}">{{item}}</md-option>
                </md-select>
              <br />template ends here`
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.css"></style>
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
    <script data-require="lodash.js@2.4.1" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <div list-country></div>
    <div list-country></div>
    <div list-country></div>
    <div list-country></div>
    <div list-country></div>
    <div list-country></div>
    <div list-country></div>
    <div list-country></div>
    <div list-country></div>
    <div list-country></div>
    
    
  <table>
    <tr ng-repeat="row in rows">
      <td ng-repeat="column in columns">
        <div my-cell-directive></div>
      </td>
    </tr>
  </table>
  
  
  
  </body>

</html>

＆＃13;

角度材料设计指令缓存编译输出

0 个答案: