AngularJs与jQuery特效slidetoggle结合

之前使用jQuery的slidetoggle方法，可以轻易的实现元素的收缩展开；使用Angularjs后，没有找到相关的方法，通过多方面查资料，自己写了个demo，展示slidetoggle的Angularjs写法：

html

1
2
3
4
<div ng-controller="ctrl_main">
    <li ng-repeat-start="el in list" ng-click="$index=!$index">{{el.name}}</li>
    <li ng-repeat-end slide-toggle="$index">{{$index}}</li>
</div>

控制器ctrl_main

1
2
3
app.controller('ctrl_main', function ($scope) {
        $scope.list=[{name:'lewis'},{name:'susan'},{name:'alice'},{name:'jay'}]
    });

指令drtv_slidetoggle

1
2
3
4
5
6
7
8
9
10
11
12
app.directive('slideToggle', function() { return {
           restrict: 'A',
           scope:{
               isOpen: "=slideToggle" },
           link: function(scope, element, attr) {
               scope.$watch('isOpen', function(newVal,oldVal){ if(newVal !== oldVal){
                       element.stop().slideToggle('slow');
                   }
               });
           }
       };
   });

运行效果：

点击其他人名，也是一样的。

总体思路就是编写指令，通过改变指令的值，来控制当前元素的收缩展开。

===不用Requirejs的同学就可以不往下看了===

【PS】将该指令用Requirejs封装成指令模块，引用就可以在你的项目中使用了；

Requirejs封装的指令模块，新建js, 命名为drtv_slidetoggle.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
define(['app','jquery'], function (app) {
    app.directive('slideToggle', function() { return {
            restrict: 'A',
            scope:{
                isOpen: "=slideToggle" },
            link: function(scope, element, attr) {
                scope.$watch('isOpen', function(newVal,oldVal){ if(newVal !== oldVal){
                        element.stop().slideToggle('slow');
                    }
                });
            }
        };
    });
});

在启动app时候调用：

1
2
3
require(['angular','domReady!','ctrl_main','drtv_slidetoggle'], function (angular) {
           angular.bootstrap(document, ['app'])
       });
本文作者：
发布时间： 2015年9月29日 - 17时09分
版权声明： 本文由 原创，采用 保留署名-非商业性使用-禁止演绎 4.0-国际许可协议
转载请保留以上声明信息！