在指令中，点击函数添加不同作用域的TextBox元素

Question

我试图创建一个指令，点击按钮，我需要添加文本框，但当我添加2,3个文本框时，它们都共享相同的范围。

我怎么能隔离范围内的指令??

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

代码:

    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 );
      };
    }
  };
});

Answer 1

尝试$scope.$new()并将文本框绑定到这个新创建的作用域:

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

演示