0

I have a complex grid like directive that is bound to a long list model object. For one of my apps, I have a list in which I need to inject the directive in the row that is selected. The code is something like 

<div id='grid-like' myComplexDirective style='display:none'></div>

<div ng-repeat='item in items'>
    <div class="data-row">
        <!-- stuff with item object -->
        <button ng-click='insertControl()'></button>
    </div>
    <!-- Here is where i'd like to inject the grid-like control and show/hide when button is clicked -->
</div>

I need to do so to avoid having several instances of the complex component (right now, it's included in each row an shown/hidden depending on a toggle value of the scope) because it's heavy and make the app sluggish. I've tried to move the element in jquery using appendTo method in the insertControl method. Unfortunately, it doesn't work as soon as I change the view. After some research, I've found out that I need to use Angular directives with transclusion or using $compile.

What is the angular way to do the jquery appendTo that would work across views?

Pierre Tammet
  • 3
  • 2
  • Not sure if I understand what you need but can you use `push()` method? For example: `$scope.items.push(newItem);` – Einius Apr 03 '15 at 20:13
  • I'm not trying to insert more items in the model but to have only one instance of a complex element in the DOM and place it in another given DOM element dynamically. – Pierre Tammet Apr 03 '15 at 21:05

1 Answers1

0

Use ngIf.

From Angular documentation:

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

<div ng-repeat='item in items'>
    <div class="data-row">
        <!-- stuff with item object -->
        <button ng-click='item.insertControl=true'></button>
    </div>
    <!-- Here is where i'd like to inject the grid-like control and show/hide when button is clicked -->
    <div ng-if="item.insertControl">
         ... some complex control ...
    </div>
</div>

If you're worried about performance use ngShow instead. DOM manipulation is expensive, ngShow avoids this.

Michael Kang
  • 52,003
  • 16
  • 103
  • 135
  • Thanks for the answer. Right now, I do exactly that with the ng-show but it feels sluggish. I thiink Angular adds the complex element to the DOM for each row, even if the condition evaluate to false (I might be wrong). For a reason I don't quite get, the ng-if doesn't work (but ng-show does)... – Pierre Tammet Apr 03 '15 at 21:02
  • Hundreds should not cause any performance issues or sluggish behaviour. Are you using jquery selectors in your directives? I suspect something other than the digest cycle is causing the issue – Michael Kang Apr 03 '15 at 22:22
  • Yes, it does use jquery. It's quite vast when loaded outside of an ng-repeat though... – Pierre Tammet Apr 04 '15 at 10:14
  • Thanks for taking the time to answer. I'll accept your answer. – Pierre Tammet Apr 08 '15 at 18:37