CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
sisimh
sisimh

Reputation: 1337

custom directive to add ng-click then draw input element

I have this directive returning the followings :

what I am trying to do here is :

1- add click event .

2-this click will draw an input field ,

so far , the ng-click is being added to DOM but it doesn't call the add function, as you can see I tried to use compile but the whole element is gone when I used it

what am I doing wrong ?

return { 
    link: function($scope, element, attrs) {
      $scope.add = add;
      $scope.remove = remove;
      el = element.attr('ng-click', 'add()');
      // $compile(el);

    function add(){
        console.log("inside addinput<<<<<<")
        var element =  '<div>\
            <input type="text"/>\
            <button ng-click="remove()">Save</button>\
            <button ng-click="remove()">Close</button>\
            </div>';
        newElement = $compile(newElement)($scope);
        element.append(newElement)
      }
      function remove(){
        newElement.remove();
      }
    }
}

Upvotes: 0

Views: 586

Answers (1)

Royi Namir
Royi Namir

Reputation: 148624

This will not work : 

 el = element.attr('ng-click', 'add()');

(you could use the compile function for this. It's just that the link function is a too-late phase to do that)

You should do this instead : 

   el .on('click', add);

Also you should move the implementation of add to a controller ( or a scope)

Upvotes: 1

Related Questions