Question

由于IE8的性能问题，我需要通过html插入选择。但是我需要插入select语句来使用Angular指令，例如ng-model和ng-change。当我运行插入选择的代码时，选择show就像预期的那样，但是诸如ng-change之类的指令属性不能运行。我通过设置innerHTML插入的代码格式为：

<select ng-model='currentAccounts' ng-change='selectedAccountChanged()' >
      <option value='1'>option 1</option>
      <option value='2'>option 2</option>
</select>

我如何才能使这些指令有效？

更新：要清楚我在这里做的是生成上面选择的代码。

  webServices.getAccounts()
  .then(function (result) {
    var str = "<select ng-model='currentAccounts' ng-change='selectedAccountChanged()' id='" + CHARGE_NUM_CONTROL_ID + "' style='width: 100%;' size='17' >";
     for (var i = 0; i < numAvailAccounts; i++) {
         str += "<option value='" + i + "'";
         if (i == 0) {
            str += " selected";       // select the 1st item
         }
         str += ">" + $scope.availableAccounts[i].Name + "</option>";
     }
     str += "</select>";
     ChargeNumPH.innerHTML = str;  // load all the options at once
  })

此代码更新以下Div的内容。

<div id="ChargeNumPH"></div>

（FWIW，我需要更改ng - 因为当选择一个项目时，它需要出现在显示所选项目的字符串中。）

聚苯乙烯。以这种方式插入代码非常快。我能够显示1500个项目的选择在50毫秒。使用ng-option和IE8需要9,000毫秒。

Answer 1

ng-model和ng-change应该仍然可以使用这种方法很好地连接起来。您可以使用ng-repeat生成选项列表，但它仍可能导致性能问题。

<select ng-model='currentAccount' ng-change='selectedAccountChanged()'>
  <option ng-repeat="account in currentAccounts" value="{{account.value}}">{{account.text}}</option>
</select>

**我将ng-model更改为currentAccount，并使currentAccounts成为查找数组。

function TestController($scope) {
  $scope.currentAccount = 1;

  $scope.currentAccounts = [
    { value: 1, text: 'option 1' },
    { value: 2, text: 'option 2' }
  ];

  $scope.selectedAccountChanged = function () {
    alert('currentAccount changed to ' + $scope.currentAccount);
  };
}

http://codepen.io/jessebibee/pen/bCvLG

如何插入引用指令的HTML代码？

1 个答案: