CODEWITHSUNDEEP
angularjsangularjs-directive
glasspill
glasspill

Reputation: 1300

append template partial on click event in directive

I would like to be able to append a template from a partial on the click event of a button multiple times. I've managed to add a div in the link function below, but I'm stuck. How do i replace it with a template?

Fiddle: http://jsfiddle.net/LPUZG/1/

app.directive('clicker', function($compile) {
    'use strict';

    return {
        restrict: "A",
        replace:false,
        link: function(scope, element, attributes) {
            element.bind("click", function(e){ 
                element.parent().append('<div>hi</div>'); 
             });
         }
    }
});



<div clicker>Click me</div>

EDIT: This partial contains some form input fields that will be filled out by the user and saved later on.

Thank you

Upvotes: 0

Views: 831

Answers (1)

AlwaysALearner
AlwaysALearner

Reputation: 43947

Specifying template or templateUrl in a directive makes the directive replace the element with the content of the template. So your clicker div wont be in existence anymore.

Instead you can use ng-include:

<div ng-include="'partials/template.html'" ng-repeat="item in items"></div>
<!-- on click the add method adds to the items -->
<div ng-click="add()">Click Me To Add</div>

Upvotes: 2

Related Questions