Using AngularJS, how do I append a directive to an element?

Question

I'm new to Angular and am trying to understand how to dynamically create new elements. I have an element directive called "pane" that replaces the pane tag with a template.

<pane ng-controller="AreaCtrl"></pane>

Template for pane (condensed):

<div>
    <section></section>
    <div class="subs"></div>
</div>

When I click on an item inside the section tag, I want to append another "pane" inside the div with class="subs" if the "pane" for the item clicked doesn't already exist. I can't get the appended pane tag to invoke the directive and be replaced by the template. Any point in the right direction would be great for an Angular newbie.

Here is a simple jsfiddle: http://jsfiddle.net/n9vXz/1/

The template in the directive is actually a templateUrl in my actual code if that makes a difference. — Scott Chantry
– Scott Chantry, Commented May 2, 2013 at 21:33

Guillaume86 · Accepted Answer · 2013-05-02 20:06:23Z

2

You probably want an array in your model, with a ng-repeat directive:

  <div>
    <a href="#" ng-click="addItem()">Add Item</a>
    <section></section>
    <div class="subs">
      <pane ng-repeat="item in list"></pane>
    </div>
  </div>

JS:

app.controller("AreaCtrl", function($scope){
  $scope.items = [{ name: 'item1' }];
  $scope.addItem = function(){
    $scope.items.push({ name: 'newItem' });
  };
});

answered May 2, 2013 at 20:06

Guillaume86

14.4k4 gold badges56 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Josh David Miller Over a year ago

Indeed! With AngularJS, we must always think in terms of our model first. Better architecture, easier testing. Not to mention that the code is just shorter this way...

Scott Chantry Over a year ago

That's the way I originally tried it but when I try to load it, even with my items array empty it freezes the browser. Sometimes I get a "Maximum call stack size exceeded". Here is a jsFiddle I threw together: jsfiddle.net/n9vXz/1/

Guillaume86 Over a year ago

looks like a recursion problem, you need to refactor the directive to explicitly specify the model (defining a isolate scope), you can try to start from jsfiddle.net/ganarajpr/vzvmS/3

Mathew Berg · Accepted Answer · 2013-05-03 16:25:35Z

I'm not sure how you're appending it to the body, but for showing you how to do it I'll assume it's just an element you have.

var newPaneElement = .....
someOtherElement.append(newPaneElement);

In order for your directive to be processed now, you'll have to tell it to $compile

You can do this by running the following directly after appending it to someOtherElement:

$compile(newPaneElement)($scope OR scope);

I put $scope or scope because I'm not sure if where you're appending it is in a controller, or within a directive.

If you can paste a jsFiddle that would be helpful.

There's no need to do compile, I think you should watch some of the tutorial videos on how to use angular. Looking at the jsfiddle you have, you don't need jquery. Also you have a directive wiring up on the pane element, but then within that directive you have another pane element so it was doing a recursive loop and crashing. I've fixed the fiddle up to do what you need:

JsFiddle http://jsfiddle.net/BcvPz/1/

Use an ng-repeat and then you can just have pane elements repeat wherever

JsFiddle http://jsfiddle.net/BcvPz/2/

That does not do what I want it to do. I want to append another pane element when I add something to the items array. Your jsFiddle just adds a span element.
That would make it recursive. You could use an ng-repeat for an array of pane elements.
That is part of what I want but I need to repeat a pane element inside of an existing pane element. Could you show me how to repeat a pane element inside of pane element? That's what I'm really after.
I'm sorry, but I don't understand what you're asking for. Repeating something within the same type is recursive, as then that new pane element would need to have pane elements within it repeated. Can you explain your scenario as that might help.

Collectives™ on Stack Overflow

Using AngularJS, how do I append a directive to an element?

2 Answers 2

3 Comments

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Related