Удалить HTML-элемент при нажатии Angular js
Это моя директива. которые отображают один 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?
Ответы
Ответ 1
Вы можете просто создать директиву, которая добавляет функцию, которая удалит html элемента. Затем вы можете просто наклеить его на ng-click. Я сделал здесь скрипку: 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>
Надеюсь, это помогло!
Ответ 2
Используйте ниже в своей директиве.
Директива
app.directive("removeMe", function($rootScope) {
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>
Рабочий демонстрационный пример
Ответ 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
Ответ 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();
};
});