Access ng-repeat repeating data inside appended html

Question

I am appending some HTML into a model item when that item is clicked using custom directive.

My code:

<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);
});

Is it possible to access model item data in this appended html?

Answer 1

Like the comments have mentioned, you really shouldn't be injecting data into the DOM yourself. If you need to change how much data is shown in the DOM, use a filter on your ng-repeat.

Also, 250 items in an ng-repeat shouldn't be enough to slow down a page unless there's some pretty heavy processing occurring on each item. I would suggest using something like Angular Batarang to profile your application to see what's actually causing it to be slow.

Answer 2

Yes it is possible, I recently asked something simular:

Create div with angular variable as attribute value

This code was suggested:

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);
});