0

我正在Angular中构建这个应用程序，其中一个div表是通过以下html使用ng-repeat形成的：

HTML

<div ng-repeat="(key, value) in data.data.ipv4">
    <div class="cellbody">{{value.descr}}</div>
    <div class="cellbody">{{value.protocol}}</div>
    <div class="cellbody">{{value.internip}}</div>
    <div class="cellbody">{{value.internrange}}</div>
    <div class="cellbody">{{value.externrange}}</div>
    <div class="deletecell">
        <span class="toggledelete"  ng-click="deleteport($event, key, 4)">
            <i class="icon-minus negativehover"></i>
        </span>
        <span class="toggledelete" style="display:none">
            <span>PORT DELETED</span>
            <span class="deletedportundo" ng-click="restoreport($event, $index, 4)">
                UNDO
            </span>
        </span>
    </div>
</div>

每行的最后一个 div 有一个可见的可点击按钮，该按钮通过 deleteport() 函数向服务器发送删除命令，然后，如果一切顺利，则启动一个动画，其中隐藏整个单元格和先前隐藏的 span出现了“deletedportundo”类。

无论如何，我的控制器看起来像这样：

Angular Javascript Controller

$scope.deleteport = function(e,f) {
    postData.index = f;
    $http.post('serverside/router.php', postData)
        .success(function(data, status, headers, config){
            if (data.status == 'ok') {
                var elem = angular.element(e.target);
                $(elem).parent().parent().parent().children('.cellbody').hide('fast');
                $(elem).parent().parent().children('.toggledelete').toggle();
                $(elem).parent().parent().parent().children('.deletecell').animate({
                width: "100%"
                }, 300 );
                $(elem).parent().parent().parent().children('.deletecell').addClass('macdeleted');
            }
    });
}

它在视觉上按预期工作，除了我知道我不应该在控制器中操作 DOM；我一直未能成功地将其集成到指令中，但因为每一行都独立于其他行，所以我无法达到预期的效果。

4

1 回答 1

0

丹尼尔，

在控制器中操作 DOM 没有任何问题。但是，我可以建议一种比使用那些讨厌的 parent().parent().parent().parent().parent() ... 调用更简单的方法来导航 :) 。

只需在 toggledelete div 中添加一个ng-show，而不是$scope.portDeleted = false在控制器中添加。这也适用于.cellbody标签。

至于.deletecell你可以使用 ng-class 的类，只需$scope.deletecell = some_value.

<div ng-class="{deletecell:deletecell}">
    <span class="toggledelete"  ng-click="deleteport($event, key, 4)">
        <i class="icon-minus negativehover"></i>
    </span>
    <span class="toggledelete" style="display:none">
        <span>PORT DELETED</span>
        <span class="deletedportundo" ng-click="restoreport($event, $index, 4)">
            UNDO
        </span>
    </span>
</div>

对于动画，您可以使用 ngAnimate ( http://www.nganimate.org/ )

于 2013-09-25T14:14:35.020 回答