1

我做了一个自定义指令，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，除非有办法让它在加载时做它的事情，然后再不循环任何东西。

我想以最 Angular 的方式做到这一点，但我意识到我可能不得不做一些完全违背 Angular 哲学的事情

4

1 回答 1

2

下面是一个示例，说明如何修改代码以便在指令之外的范围内绑定指令中的某些变量。我曾经$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);
    }
  }
});

这是一个演示

于 2013-06-18T05:40:37.263 回答