Question

这是我的指示。在身体上显示一个Div。

app.directive("autosuggest", function($rootScope) {
      return {
            scope: {
              doneFlag      : "=",
              groupFlag     : "=",
              inviteesFlag  : "=",
              init: '&'
            },
            templateUrl : "title.html",
            link: function(scope, element, attrs) { 
                  }

});

并在title.html

<div class="showw">
   <img id="hideDivOnClick" src="ddd.png"/>
</div>

我包含这样的指令

<div autosuggest="" done-Flag="1" group-Flag="1"  invitees-Flag="1" selected-Array="" ></div>

所以当我点击图片时，这个<div autosuggest="" done-Flag="1" group-Flag="1" invitees-Flag="1" selected-Array="" ></div>部分会从身体中移除。喜欢在Javascript中删除元素。我将如何在angularJS中实现这一目标？

Answer 1

在您的指令中使用以下内容。

<强>指令

app.directive("removeMe", function() {
      return {
            link:function(scope,element,attrs)
            {
                element.bind("click",function() {
                    element.remove();
                });
            }
      }

});

<强> HTML

<div class="showw" remove-me>
   <img id="hideDivOnClick" src="ddd.png"/>
</div>

Working Demo

Answer 2

您可以简单地创建一个指令，该指令添加一个将删除元素的html的函数。然后你可以坚持点击一下。我在这里做了一个小提琴：http://jsfiddle.net/qDhT9/

// in the directive
scope.remove = function() {
    elt.html('');
};
// in the dom
<div remove-on-click ng-click="remove()"> 
    REMOVE ME 
</div>

希望这有帮助！

Answer 3

对于清除/删除html元素，我们可以使用以下方法

var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.empty();  //clears contents

var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.remove();   //removes element

参考：http://blog.sodhanalibrary.com/2014/08/empty-or-remove-element-using-angularjs.html#.Vd0_6vmqqkp

Answer 4

Aparna的答案更加强大，你可以使用$ document服务作为浏览器'window.document'对象的包装器。因此，不是全局访问'document'变量，而是可以作为依赖项访问'$ document'对象。这有助于使您的代码更易于测试。

例如：

app.controller('exampleCtrl', function($scope, $document) {
  $scope.deleteArticle = function(id) {
    var articleRow = angular.element($document[0].querySelector('div[data-articleid="'+id+'"]'));
    articleRow.remove();
  };
});

在Angular js中单击时删除HTML元素

4 个答案: