Question

我是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控制器中时，开始看起来很难看 - 我想避免任何混合。< / p>

非常感谢！

Answer 1

执行此操作的角度方式可以是：

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

如果你想为它设置动画，请使用ng-class而不是ng-show并使用css过渡。

Answer 2

这样做的一种方法是编写一个指令，但理想情况下你应该使用ng-animate和ng-show：

首先，在ng-click中切换一个属性，用“someclass”类保存在“li”上：

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

然后在将要滑动的部分上使用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类来工作。

希望这有帮助。

Answer 3

Angularjs最佳实践建议您不要在控制器中进行DOM操作。这样做的方法是使用指令。就我看来，你甚至不需要包含jQuery本身。 angular提供了一个jQuery子集（有关可用功能，请参阅http://docs.angularjs.org/api/angular.element），他们称之为jQlite。

大概你应该做点什么：

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＆amp;＆amp;这个元素的class add兄弟next()。

希望有所帮助。

动态slideToggle与AngularJS

3 个答案: