当前位置: 首页 > 面试题库 >

AngularJS使用指令动态添加和删除元素

欧阳飞章
2023-03-14
问题内容

我使用指令创建联系表格。最初我创建用于显示客户表单的customerForm指令。在这种形式下,我有一个按钮,当我们单击添加按钮时,称为getData函数,该函数内部使用newDirective显示ul列表。为此,我使用$
compile
api编译html代码。很好,当我们单击“删除”按钮时,它也显示列表值和“删除”按钮,它称为scope.remove()函数。但是它只能删除一个。之后,我无法删除任何元素(即按钮)。我不知道为什么会这样。请帮我。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>

问题答案:

我正在解决你的问题。您的问题是指令new-directiveno具有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()">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>


 类似资料:
  • 问题内容: 我正在做的事情非常精简,可以解决问题。 我有一个简单的。每当您单击一个元素时,它都会添加另一个元素。但是,需要先对其进行编译才能正确呈现。 我的研究使我走向了。但是所有示例都使用了一个复杂的结构,我真的不知道如何在这里应用它。 小提琴在这里:http : //jsfiddle.net/paulocoelho/fBjbP/1/ JS在这里: Josh David Miller的解决方案:

  • 问题内容: 我正在尝试添加/删除表行。 这是我的代码: HTML表格 JavaScript 现在,如您所见,在我的表格中,我有文本字段和按钮。我想要的是: 仅重复行的结构。我现在无法执行此操作,因为innerHTM仅接收文本。如何插入文本框或标签? 文本字段的ID也应该不同,因为稍后我将检索这些值以将其放入数据库中。 我想放置一个函数以增加POI的数量 有人可以帮我吗? 问题答案: 您可以仅克隆具

  • 问题内容: 我有这样的设置: 控制器广播事件 指令侦听,然后通过append将其写入DOM,并以此创建指定指令的新元素。 IE浏览器: Angular从未调用过指令 当我检查DOM(并调试)时,我看到Controller 和指令正在执行其工作,并且有新的元素。 什么不见​​了?动态创建这些元素后需要做什么来触发指令调用? 问题答案: 请参阅。您可以类似于以下方式使用此服务: 这将执行新元素的编译和

  • 问题内容: 我正在尝试工作如何使用ngClick添加类。我已经上传了我的代码到plunker 这里点击。查看角度文档,我不知道应该怎么做。以下是我的代码片段。有人可以指引我正确的方向 控制者 问题答案: 您只需要将变量绑定到指令“ ng-class”,然后从控制器进行更改即可。这是如何执行此操作的示例: 这是在jsFiddle上工作的示例

  • 问题内容: 当前的官方文档仅显示如何动态 更改 标签 内 的组件。 我想实现的是,让我们说我有3个部分组成:,,并具有以下选择: 再有6个按钮,这将增加或删除每个组件:,,和 当我单击时,该页面将添加到呈现它的页面中,因此该页面将包含: 然后,如果我单击两次,该页面现在将包含: 如果单击,该页面现在将包含所有这些组件: 可以在Angular中实现吗?请注意,这不是我要寻找的解决方案,因为它仅允许向

  • 问题内容: 我花了一段时间试图找到一个优雅的解决方案,而我却找到了一个“可行”的解决方案,它感觉不是最简单或正确的做事方式。 所以,我的问题是…如何动态加载指令!在某些情况下,以下是我希望我能摆脱它的方式!除了模板加载之外,我没有包含路由或其他任何内容,而是为下面的控制器分配了ng- controller。 app.js template.html 任何人都可以提供的建议将不胜感激,如果我做任何明