Inside Directive click function add TextBox elements with different scope

Question

I am trying to create a directive , on click of button i need to add text box but when i add 2,3 textbox they all share same scope.

How can i isolate the scope inside directive ??

http://jsfiddle.net/A8Vgk/584/

Code::

    angular.module('myApp', []).directive( 'test', function ( $compile ) {
  return {
    restrict: 'E',
    scope: { text: '@' },
    template: '<p ng-click="add()">Click me </p>',
    controller: function ( $scope, $element ) {
      $scope.add = function () {
        var el = $compile( "<input type='text' ng-model='user.name' value='hello-World!'>" )( $scope );
        $element.parent().append( el );
      };
    }
  };
});

Khanh TO · Accepted Answer · 2014-06-21 09:02:26Z

1

Try $scope.$new() and bind your textbox to this newly created scope:

var el = $compile( "<input type='text' ng-model='user.name' value='hello-World!'>" )( $scope.$new() );

DEMO

answered Jun 21, 2014 at 9:02

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

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

Collectives™ on Stack Overflow

Inside Directive click function add TextBox elements with different scope

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related