如何在指令中将innerHTML插入的html上使用ng-bind

Question

我做了一个自定义指令，里面有两个ng-repeats。一个ng-repeat嵌套在另一个中。我可以使用该代码，它在chrome中的性能很好，但在iPad和iPhone上却很慢。

有10个节，每个节有5行，在滚动和更改绑定时需要非常快。我认为减速是由于绑定的所有循环引起的，但是用户输入只需更改一个数组即可。页面加载后，其余绑定永远不会改变。

因此，我试图找出一种方法，仅绑定一个变量即可加载嵌套的无序列表。这是我的指令的伪代码。

.directive('myDirective', function($compile) {
  return {
    restrict: 'A'
    link: function(scope, elm, attrs) {
      outerList = '<ul><li>statically generated content that does not change'
      outerList += '<ul><li ng-bind="I only need to bind one thing"><li></ul>'
      outerList += < /ul>'
      elm[0].innerHTML = outerList
    }
  }
});

您可以看到，我正在尝试生成html内容，然后将它们与innerHTML插入。问题是当我以这种方式进行操作时，ng-bind不起作用。我尝试再次$compile，但没有任何改变。

有人有更好的方法吗？我不在乎解决方案有多可怕，我只是真的需要应用程序的这一部分超级快。最主要的是，我不希望ng-repeat，除非有一种方法可以使它在加载时完成其任务，然后再也不会遍历任何事物。

我想尽可能以最角度的方式做到这一点，但我意识到我可能必须做一些完全违反角度哲学的事情

Answer 1

这里是一个示例，说明了如何修改代码以将指令中的某个变量从其作用域之外绑定。我已经使用$compile确保您的指令DOM操作具有自己的指令进行编译。我用replaceWith将指令元素替换为您编译的DOM：

HTML

<div ng-app="myApp">
    <div ng-controller="ctrlMain">
        <div my-directive="bindMe"></div>
    </div>
</div>

JavaScript

var app = angular.module('myApp',[]);
app.controller('ctrlMain',function($scope){
    $scope.bindMe = {id:1,myvar:"test"};
});
app.directive('myDirective', function($compile){
  return{
    restrict: 'A',
    scope: {
        varToBind: '=myDirective'     
    },
    link: function(scope, elm, attrs){
      outerList = '<ul><li>statically generated content that does not change'
      outerList += '<ul><li ng-bind="varToBind.myvar"><li></ul>'
      outerList += '</ul>';
      outerList = $compile(outerList)(scope);
      elm.replaceWith(outerList);
    }
  }
});

Here is a demo