Angularjs使用指令动态添加和删除元素 [英] Angularjs dynamically adding and removing elements using directive

问题描述

我使用指令创建联系表单。最初我创建了customerForm指令来显示客户表单。在那种形式我有一个按钮，当我们点击添加按钮，称为getData函数，该函数内部使用newDirective显示ul列表。因为我使用$ compile api来编译html代码。这很好，它还显示列表值和删除按钮当我们点击删除按钮，它的名为scope.remove（）函数。但它只删除了一些。之后，我无法删除任何元素（即按钮）。我不知道为什么会发生这种情况。请帮我。 jsfiddle

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 $compile api for compiling 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

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

app.js

app.js

angular.module('sanshaApp', [])

.directive('newDirective', function ( $compile ){
        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($compile) {

        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);
                   //compile html DOM
                   $compile( $newDirective )(scope);
                }
            }
        }
   })

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

  }])

customer-form.html

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>

推荐答案

我解决了你的问题。你的问题是指令 new-directive 没有 isolate 范围。

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

jsfiddle 上的实例。

angular.module('app', [])

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

  }])

  .directive('newDirective', function($compile) {
    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($compile) {

    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);
          $compile($newDirective)(scope);
        }

      }
    };
  });

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

这篇关于Angularjs使用指令动态添加和删除元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！