2

私は AngularJS を初めて使用し、次の jQuery コードを AngularJS に移行しようとしています。

$('#someid').on('click', 'someclass', function() {
  $(this).next().slideToggle('fast');
});

AngularJS に変換し始めた HTML は次のようになります

<ul id='someid'>
  <li ng-repeat="...">
    <ul>
      <li class="someclass">{{ ... }}</li>
      <li style="display:none">the part that will be slideToggle'd</li> 
    </ul>
  </li>
</ul>

ユーザーがアプリを操作すると、要素が ng-repeat リストに動的に追加されるため、jQuery.on() が使用されます。不安定なバージョンの AngularJS を使用しても問題ありません。

AngularJS で jQuery フラグメントをどのように書き直せばよいですか? 新しいディレクティブを追加したり、ng-animate で遊んだりするなど、いくつかのことを試しました。しかし、jQuery コードを ng コントローラーに追加すると、見苦しくなり始めました。ハイブリッドは避けたいと思います。

どうもありがとう！

4

3 に答える 3

2

これを行う 1 つの方法はディレクティブを記述することですが、理想的には ng-show と共に ng-animate を使用する必要があります。

まず、クラス「someclass」で「li」を保持するng-click内のプロパティを切り替えます。

<li class="someclass" ng-click="item.isVisible = !item.isVisible;">{{item.name}}</li>

次に、slideToggle される部分で ng-show と ng-animate を使用します。

<li ng-show="item.show" ng-animate="'animate'" style="display:none">the part that will be slideToggle'd</li>

ng-animate が機能するには、アニメーション CSS クラスを記述する必要もあります。

お役に立てれば。

于 2013-07-28T14:34:24.193 に答える
2

Angularjs のベスト プラクティスでは、コントローラー内で DOM 操作を行わないことをお勧めします。これを行う方法は、ディレクティブを使用することです。私が見る限り、jQuery 自体を含める必要さえありません。angular は、 jQlite と呼ばれる jQuery サブセット (利用可能な機能についてはhttp://docs.angularjs.org/api/angular.elementを参照) を提供します。

大まかに次のようなことをする必要があります：

var app = angular.module('myApp', []);

app.directive('clickunfold', function () {
    return {
        restrict: 'C',
        link: function (scope, element, attr) {
            element.bind('click', function () {
                element.next().removeClass('noShow').addClass('show');
            }
        }
    }
});

HTML は次のようになります。

<ul>
    <li class="clickunfold">{{ ... }}</li>
    <li class="noShow">the part that will be slideToggle'd</li> 
</ul>

CSS は次のようになります。

.noShow { display: none }
.show { /* Css Transitions to make the unfold effect or simply a display: block */ }

上記のディレクティブはクラス ( restrict: 'C') として定義され、このディレクティブをクラスとして持つ要素をクリックすると、この要素の兄弟にclass remove&&が発生します。class addnext()

それが役立つことを願っています。

于 2013-07-28T14:34:46.183 に答える
2

これを行う角度のある方法は次のとおりです。

<li class="someclass" ng-click="slider_open = !slider_open">..</>
<li ng-show="slider_open">...</li>

アニメーション化する場合は、ng-show の代わりに ng-class を使用し、css トランジションを使用します。

于 2013-07-28T09:49:47.220 に答える