javascript - Angularjs dynamically adding and removing elements using directive - Stack Overflow

admin管理员组

文章数量:1323714

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 button, called getData function and that function internally used newDirective for displaying ul list. for that i used $pile api for piling html code. that is fine and its also display list value and remove button when we click on remove button, its called scope.remove() function. But its delete only ones. after that i cant remove any element (i.e. button). i dont know why its happening. please help me. jsfiddle

index.html

<div class="container">
    <customer-form></customer-form>
</div>

app.js

angular.module('sanshaApp', [])

.directive('newDirective', function ( $pile ){
        return {
            restrict: 'E',
            template: 
                '<ul>' +
                    '<li>{{somoe value here}}' +
                        '<button ng-click="remove()">Remove</button>' +
                    '</li>'+
                '</ul>',
            link: function (scope, element, attributes) {
                //called when click on Remove button  
                scope.remove = function () {
                    element.remove();
                }
            }
        }
    })
.directive('customerForm', function($pile) {

        return {

            scope: {

            },

            restrict: 'E',

            transclude: true,

            templateUrl: "../../views/customer-form.html",

            controller: "mainCtrl",

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

                scope.getData = function() {
                   //create new element new-directive
                   $newDirective = angular.element('<new-directive>');
                   element.append($newDirective);
                   //pile html DOM
                   $pile( $newDirective )(scope);
                }
            }
        }
   })

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

  }])

customer-form.html

   <div class="form-group row">
        <label for="name" class="col-lg-2 form-control-label">Customer name</label>
        <div class="col-lg-4">
            <input type="text" class="form-control" ng-model="name.aa" placeholder="customer name">
        </div>
        <label for="email" class="col-lg-2 form-control-label">Email address</label>
        <div class="col-lg-4">
            <input type="email" class="form-control" ng-model="name.email" placeholder="Email">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-lg-4">
           <button class="btn btn-default" value="add" ng-click="getData()">
               <span class="glyphicon glyphicon-plus"></span>
           </button>
        </div>
     </div>

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 button, called getData function and that function internally used newDirective for displaying ul list. for that i used $pile api for piling html code. that is fine and its also display list value and remove button when we click on remove button, its called scope.remove() function. But its delete only ones. after that i cant remove any element (i.e. button). i dont know why its happening. please help me. jsfiddle

index.html

<div class="container">
    <customer-form></customer-form>
</div>

app.js

angular.module('sanshaApp', [])

.directive('newDirective', function ( $pile ){
        return {
            restrict: 'E',
            template: 
                '<ul>' +
                    '<li>{{somoe value here}}' +
                        '<button ng-click="remove()">Remove</button>' +
                    '</li>'+
                '</ul>',
            link: function (scope, element, attributes) {
                //called when click on Remove button  
                scope.remove = function () {
                    element.remove();
                }
            }
        }
    })
.directive('customerForm', function($pile) {

        return {

            scope: {

            },

            restrict: 'E',

            transclude: true,

            templateUrl: "../../views/customer-form.html",

            controller: "mainCtrl",

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

                scope.getData = function() {
                   //create new element new-directive
                   $newDirective = angular.element('<new-directive>');
                   element.append($newDirective);
                   //pile html DOM
                   $pile( $newDirective )(scope);
                }
            }
        }
   })

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

  }])

customer-form.html

   <div class="form-group row">
        <label for="name" class="col-lg-2 form-control-label">Customer name</label>
        <div class="col-lg-4">
            <input type="text" class="form-control" ng-model="name.aa" placeholder="customer name">
        </div>
        <label for="email" class="col-lg-2 form-control-label">Email address</label>
        <div class="col-lg-4">
            <input type="email" class="form-control" ng-model="name.email" placeholder="Email">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-lg-4">
           <button class="btn btn-default" value="add" ng-click="getData()">
               <span class="glyphicon glyphicon-plus"></span>
           </button>
        </div>
     </div>

• javascript
• angularjs
• angularjs-directive
• angularjs-scope
• angularjs-ng-repeat

Share Improve this question Follow edited Feb 16, 2016 at 10:57 Tushar Balar asked Feb 16, 2016 at 10:22 Tushar BalarTushar Balar 75133 gold badges88 silver badges2525 bronze badges 6

• What errors do you get on the browser Javascript console? – Johannes Jander Commented Feb 16, 2016 at 10:37
• I haven't any error on browser, but scope.remove() is called only once, after that its not called even if i click on remove button. i don't know why. @JohannesJander – Tushar Balar Commented Feb 16, 2016 at 10:40
• An example will be useful in the jsFiddle. – Stepan Kasyanenko Commented Feb 16, 2016 at 10:44
• Possibly element.remove(); is removing too much, $(element).clear() might work – Johannes Jander Commented Feb 16, 2016 at 10:48
• DEMO jsfiddle @StepanKasyanenko – Tushar Balar Commented Feb 16, 2016 at 10:54

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 4

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($pile) {
    return {
      restrict: 'E',
      replace: true,
      scope: {},
      template: '<ul>' +
        '<li>' +
        '<button ng-click="remove()">Remove {{ind}}</button>' +
        '</li>' +
        '</ul>',
      link: function(scope, element, attributes) {
        scope.ind = Math.round(Math.random() * 100);
        scope.remove = function() {
          console.log(scope.ind);
          element.remove();
        }
      }
    }
  })

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

    return {

      scope: {},

      restrict: 'E',

      transclude: true,

      template: '<div>' +
        '<input type="button" value="addd" name="AAA" ng-click="getData()">' +
        '</div>',

      controller: "mainCtrl",

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

        scope.getData = function() {
          $newDirective = angular.element('<new-directive>');
          element.append($newDirective);
          $pile($newDirective)(scope);
        }

      }
    };
  });

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <customer-form></customer-form>
</div>

本文标签： javascriptAngularjs dynamically adding and removing elements using directiveStack Overflow