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

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

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

如果要对其进行动画处理，请使用 ng-class 而不是 ng-show 并使用 css 过渡。

于 2013-07-28T09:49:47.220 回答
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>

您还需要编写动画 css 类以使 ng-animate 工作。

希望这可以帮助。

于 2013-07-28T14:34:24.193 回答
2

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&& 。class addnext()

希望有帮助。

于 2013-07-28T14:34:46.183 回答