0

私は Angular でこのアプリケーションを構築しています。そこでは、次の html で ng-repeat を使用して div テーブルが形成されます:

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() 関数を介してサーバーに削除命令を送信するクリック可能なボタンが表示されます。その後、すべてがうまくいくと、セル全体が非表示になり、以前に非表示だったスパンのアニメーションが開始されます。クラス「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() ... 呼び出し :) でナビゲートするよりも簡単な方法を提案できます。

ng-showコントローラーで行うのではなく、toggledelete div に追加するだけです$scope.portDeleted = false。これは.cellbodyタグにも機能します。

クラスに関しては、.deletecellng-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 に答える