Angularjs dynamically adding and removing elements using directive

Question

I used directive for creating contact form. Initially i create customerForm directive for displaying customer form. In that form i have one button, when we click on add butt

Answer 1

I'm solve your problem. Your problem is that directive new-directive no has isolate scope.

Live example on jsfiddle.

angular.module('app', [])

  .controller("mainCtrl", ['$scope', function($scope) {

  }])

  .directive('newDirective', function($compile) {
    return {
      restrict: 'E',
      replace: true,
      scope: {},
      template: '
' +
        '
' +
        'Remove {{ind}}' +
        '
' +
        '
',
      link: function(scope, element, attributes) {
        scope.ind = Math.round(Math.random() * 100);
        scope.remove = function() {
          console.log(scope.ind);
          element.remove();
        }
      }
    }
  })

  .directive('customerForm', function($compile) {

    return {

      scope: {},

      restrict: 'E',

      transclude: true,

      template: '
' +
        '' +
        '
',

      controller: "mainCtrl",

      link: function(scope, element, attrs, mainCtrl) {

        scope.getData = function() {
          $newDirective = angular.element('');
          element.append($newDirective);
          $compile($newDirective)(scope);
        }

      }
    };
  });