Question

我想知道，我的视图/网页中有以下DOM结构

<div>
    <p>I am some text or a comment or something</p>
    <a href="" ng-click="deleteThisDiv()">X</a>
</div>
<div>
    <p>I am some text but this Div may have more content like IMG or inputs</p>
    <a href="" ng-click="deleteThisDiv()">X</a>
</div>

我想在控制器上添加一个名为deleteThisDiv的方法，它将删除href的父DIV和所有DIV的内容（包括我刚刚点击的href）。这很容易用jQuery，因为我可以得到父和使用$target.remove()但是我想摆脱jQuery的方式并使用AngularJS最佳实践删除项目。我知道我可以使用jqLite，因为$target.remove()被支持，我想我可以爬上DOM树来找到DIV但是有更好的方法来做这个（比如使用ng-show/ng-hide等）？请注意，我可以为我的HTML添加ID，但我不想使用ID填充HTML结构。

当我说得更好时，我指的是一种AngularJS方式！我只是想摆脱使用jQuery进行这些事情的思维方式...请注意HTML是编码的，不是由数组生成或循环遍历对象等

Answer 1

我认为“角度方式”是使用ng-show指令有条件地显示div，如果您要查找的是可以显示/隐藏div的函数。如果你想要在DOM中拥有一个或另一个div，我会看一下ng-if或ng-switch。

请注意，ng-if和ng-switch仅评估一次意味着您无法拥有“删除”DIV的功能。另一方面，ng-show在每个$digest周期

进行评估

<div ng-show="someExpression>
    <p>I am some text or a comment or something</p>
    <a href="" ng-click="someExpression = !someExpression">X</a>      
    <!--Clicking this will show/hide the div--> 
</div>

<div ng-if="someExpression">
    <p>I am some text but this Div may have more content like IMG or inputs</p>
    <a href="" ng-click="someExpression = !someExpression">X</a>      
    <!--Clicking this has no effect because ng-if is only evaluated once-->
</div>

Answer 2

使用ng-show ...

<div ng-show="showFlag">
    <p>I am some text or a comment or something</p>
    <a href="" ng-click="showFlag=false">X</a>
</div>

在控制器中

，您需要定义变量，如：

$scope.showFlag= true;

Answer 3

你可能正在寻找这个。

module.controller('TestController',
        function TestController($scope) {

            $scope.deleteThisDiv = function ($event) {
                $event.target.parentNode.parentNode.removeChild($event.target.parentNode);

            };
        });

Answer 4

我使用此指令的原因非常相似：

<div destroyOnEvent="destroyThisDiv">
    <p>I am some text or a comment or something</p>
    <a href="" ng-click="$emit('destroyThisDiv')">X</a>
</div>

.directive('destroyOnEvent',function($rootScope) {
    return {
        restrict : 'A',
        link : function($scope,$element,$attrs) {   
            $rootScope.$on($attrs.destroyOnEvent,function() {
                $element.remove();
            });
        }
    }
});

使用AngularJS而不是jQuery从DOM / View中删除项目

4 个答案: