在附加的 html 中访问 ng-repeat 重复数据答案

【问题标题】：Access ng-repeat repeating data inside appended html在附加的 html 中访问 ng-repeat 重复数据
【发布时间】：2014-05-14 16:20:59
【问题描述】：

当使用自定义指令单击模型项时，我将一些 HTML 附加到模型项中。

我的代码：

<div appenddata>
    <div ng-repeat="model in models">
        <label ng-bind="model.name"></label>
    </div>
<div>

directive('appenddata', function($compile) {
   // click handlers
   $(element).after("<p ng-bind='model.name'></p>);
   $compile(html)(scope);
});

是否可以在这个附加的 html 中访问模型项数据？

【问题讨论】：

你真的应该让控制器驱动你的视图。单击事件应该修改控制器中的数据，并且视图应该对数据更改做出相应的反应，相信我，它会让你的生活更轻松。使用 $compile、$eval 和类似的东西的用例很少。
我有大约 250 件商品。当我加载所有项目时，该应用程序在设备中非常慢。所以我想尝试这种方式，以便仅在单击时填充 DOM
查看binarymuse.github.io/ngInfiniteScroll 以及它是如何工作的，它可能会给你一些想法。

标签： javascript angularjs angularjs-scope angularjs-ng-repeat

【解决方案1】：

就像 cmets 所提到的，您真的不应该自己将数据注入 DOM。如果您需要更改 DOM 中显示的数据量，请在 ng-repeat 上使用过滤器。

此外，一个 ng-repeat 中的 250 个项目不应足以减慢页面速度，除非每个项目都发生了一些相当繁重的处理。我建议使用 Angular Batarang 之类的东西来分析你的应用程序，看看是什么导致它变慢。

【讨论】：

【解决方案2】：

是的，有可能，我最近问了一些类似的问题：

Create div with angular variable as attribute value

建议使用此代码：

angular.element($("#canvas")).injector().invoke(function($compile) {
  var scope = angular.element($("#canvas")).scope();
  var compiledImg = $compile('<img id="editImage" ng-src={{ImageToEdit}}>')(scope);
  $("#canvas").replaceWith(compiledImg);
});

【讨论】：