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

216 IT屋

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

index.html

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

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

   <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'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: '<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>

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



index.html < / h2>

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


app.js



  angular.module('sanshaApp',[])

.directive('newDirective',function($ compile){
return {
restrict: 'E',
模板:
'< ul>'+
'< li> {{somoe value here}}'+
'< button ng-click ="remove()">删除< / button>'+
'< / li>'+
'< / ul>',
link:function(scope,element ,属性){
//单击"删除"按钮时调用
scope.remove = function(){
element.remove();
}
}
}
})
.directive('customerForm',函数($ compile){

返回{

范围:{

},

限制: 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);
//编译html DOM
$ compile($ newDirective)(范围);
}
}
}
})

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

}])


customer-form.html



 < div class ="form-group row"> 
< label for ="name"class ="col-lg-2 form-control-label">客户名称< / 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">电子邮件地址< / 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 范围。



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()">删除{{ind}}< / button>'+'< / li>'+'< / ul>',链接: function(scope,element,attributes){scope.ind = Math.round(Math.random()* 100); scope.remove = function(){console.log(sc) ope.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>  


本文地址:IT屋 » Angularjs使用指令动态添加和删除元素