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

查看：27
本文介绍了Angularjs 使用指令动态添加和删除元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

index.html

<客户表格></客户表格>

app.js

angular.module('sanshaApp', []).directive('newDirective', function ( $compile ){返回 {限制:'E'，模板:'
    '+'
  • {{这里的值}}' +'<button ng-click="remove()">移除</button>'+'</li>'+'</ul>',链接:函数(范围、元素、属性){//点击删除按钮时调用scope.remove = 函数 () {element.remove();}}}}).directive('customerForm', function($compile) {返回 {范围: {},限制:'E'，转置:真实，templateUrl: "../../views/customer-form.html",控制器:mainCtrl"，链接:函数(范围，元素，属性，mainCtrl){scope.getData = function() {//创建新元素 new-directive$newDirective = angular.element('');element.append($newDirective);//编译html DOM$compile( $newDirective )(scope);}}}}).controller("mainCtrl", ['$scope', function($scope) {}])

客户表单.html

 
<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="客户名称">
<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 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>

解决方案

我正在解决您的问题.您的问题是指令 new-directive 没有 isolate 范围.

jsfiddle 上的实例.

angular.module('app', []).controller("mainCtrl", ['$scope', function($scope) {}]).directive('newDirective', function($compile) {返回 {限制:'E'，替换:真的，范围: {}，模板:'
    '+'
  • '+'<button ng-click="remove()">删除{{ind}}</button>'+'</li>'+'</ul>',链接:功能(范围，元素，属性){scope.ind = Math.round(Math.random() * 100);scope.remove = function() {控制台日志(范围.ind)；element.remove();}}}}).directive('customerForm', function($compile) {返回 {范围: {}，限制:'E'，转置:真实，模板:'
    '+'<input type="button" value="addd" name="AAA" ng-click="getData()">'+'</div>',控制器:mainCtrl"，链接:函数(范围，元素，属性，mainCtrl){scope.getData = function() {$newDirective = angular.element('');element.append($newDirective);$compile($newDirective)(范围);}}};});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><div ng-app="app"><客户表单></客户表单>

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>

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆