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

html

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

控制器ctrl_main

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

指令drtv_slidetoggle

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

运行效果:

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

总体思路就是编写指令,通过改变指令的值

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

【ps】将该指令用requirejs封装成指令模块,引用就可以在你的项目中使用了;

requirejs封装的指令模块,新建js,命名为drtv_slidetoggle.js:

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

在启动app时候调用:

  1. require(['angular', 'domReady!','ctrl_main','drtv_slidetoggle'], function (angular) {
  2. angular.bootstrap(document, ['app'])
  3. });

angularjs与jquery特效slidetoggle结合的更多相关文章

  1. Web设计师值得收藏的10个jQuery特效

    jQuery已经不是什么新鲜的事儿,以前总把它认为是非常难的东西,也就没有认真去了解他了.直到学完CSS的大部分内容,才开始接触这种"write less, do more" 的J ...

  2. 鼠标滑过图片变暗文字链接滑出jQuery特效

    效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  3. 图片左右间隔滚动Jquery特效

    图片左右间隔滚动Jquery特效,支持自动播放的开启与关闭,同时支持左右箭头的点击播放,具体处理程序如下 <!DOCTYPE html > <html> <head> ...

  4. AngularJs 与Jquery的对比分析,超详细!

    闲来无事,在网上发现了一篇对比AngularJs和Jquery的文章.恰好最近自己也在研究AngularJs.特此收藏.需要的朋友可以参考. 原问题:假如我熟悉利用jQuery去开发客户端应用,那么我 ...

  5. 分享一组很赞的 jQuery 特效【附源码下载】

    作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些  ...

  6. jQuery 特效:盒子破碎和移动动画效果

    今天,我们将创建一个使用 jQuery 制作的非常甜蜜的动画效果.我们的想法是在网站的顶部有小盒子,当一个菜单项被点击时,箱子动画形成的主要内容区域分散在各处.我们会用一些不同的动画效果,我们将为菜单 ...

  7. AngularJS vs. jQuery

    很多Web开发新手都会有这样的疑问“我应该使用什么开发框架呢,如何快速学会Web开发呢?”这个问题其实没有一个统一的正确答案,其中讨论最多的就是AngularJS和jQuery的差别.这两者的之间的比 ...

  8. JQuery特效分享网站

    各种jquery特效分享,可以去上面找资源. http://www.jqshare.com/

  9. 一款兼容IE6并带有多图横向滚动的jquery特效

    一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...

随机推荐

  1. 【Python】引用计数

    一.概述 要保持追踪内存中的对象,Python使用了引用计数这一简单的技术. 二.引用计数的增减 2.1 增加引用计数 当对象被创建并(将其引用)赋值给变量时,该对象的引用计数被设置为1. 对象的引用 ...

  2. HDU---BigZhuGod的粉丝

    Problem Description 真正的粉丝,是不需要题目描述的^_^.   Input 第一行输入数据组数T(1≤T≤100).接下来T行,每行一个有格式的字符串,详见样例,字符串长度不超过1 ...

  3. *CF2.D(哥德巴赫猜想)

    D. Taxes time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  4. POJ1753 Flip Game(bfs、枚举)

    链接:http://poj.org/problem?id=1753 Flip Game Description Flip game is played on a rectangular 4x4 fie ...

  5. asp.net 使用DroDownList来实现二级联动

    今天做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件. ...

  6. C#_技巧:字符串分组排序

    思想//GroupBy+ToDictionary实现Dictionary<> List<string> list = new List<string>(); //l ...

  7. asp.net identity UserSecurityStamp 的作用

    UserSecurityStamp 主要是用来对用户安全相关信息做一个快照. 在使用asp.net identity 的 CreateAsync(TUser user) 创建一个用户的时候,如果开启了 ...

  8. .NET面试题系列[15] - LINQ:性能

    .NET面试题系列目录 当你使用LINQ to SQL时,请使用工具(比如LINQPad)查看系统生成的SQL语句,这会帮你发现问题可能发生在何处. 提升性能的小技巧 避免遍历整个序列 当我们仅需要一 ...

  9. 基础知识漫谈(2):从设计UI框架开始

    说UI能延展出一丢丢的东西来,光java就有swing,swt/jface乃至javafx等等UI toolkit,在桌面上它们甚至都不是主流,在web端又有canvas.svg等等. 基于这些UI工 ...

  10. UI控件(UIPickerView)

    @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; _item1 = [[NSArray alloc]i ...