angularjs与jquery特效slidetoggle结合
之前使用jquery的slidetoggle方法,可以轻易的实现元素的收缩展开;使用angularjs后,没有找到相关的方法,通过多方面查资料,自己写了个demo,展示slidetoggle的angularjs写法:
html
- <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
- app.controller('ctrl_main', function ($scope) {
- $scope.list=[{name:'lewis'},{name:'susan'},{name:'alice'},{name:'jay'}]
- });
指令drtv_slidetoggle
- 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:
- 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时候调用:
- require(['angular', 'domReady!','ctrl_main','drtv_slidetoggle'], function (angular) {
- angular.bootstrap(document, ['app'])
- });
angularjs与jquery特效slidetoggle结合的更多相关文章
- Web设计师值得收藏的10个jQuery特效
jQuery已经不是什么新鲜的事儿,以前总把它认为是非常难的东西,也就没有认真去了解他了.直到学完CSS的大部分内容,才开始接触这种"write less, do more" 的J ...
- 鼠标滑过图片变暗文字链接滑出jQuery特效
效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- 图片左右间隔滚动Jquery特效
图片左右间隔滚动Jquery特效,支持自动播放的开启与关闭,同时支持左右箭头的点击播放,具体处理程序如下 <!DOCTYPE html > <html> <head> ...
- AngularJs 与Jquery的对比分析,超详细!
闲来无事,在网上发现了一篇对比AngularJs和Jquery的文章.恰好最近自己也在研究AngularJs.特此收藏.需要的朋友可以参考. 原问题:假如我熟悉利用jQuery去开发客户端应用,那么我 ...
- 分享一组很赞的 jQuery 特效【附源码下载】
作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些 ...
- jQuery 特效:盒子破碎和移动动画效果
今天,我们将创建一个使用 jQuery 制作的非常甜蜜的动画效果.我们的想法是在网站的顶部有小盒子,当一个菜单项被点击时,箱子动画形成的主要内容区域分散在各处.我们会用一些不同的动画效果,我们将为菜单 ...
- AngularJS vs. jQuery
很多Web开发新手都会有这样的疑问“我应该使用什么开发框架呢,如何快速学会Web开发呢?”这个问题其实没有一个统一的正确答案,其中讨论最多的就是AngularJS和jQuery的差别.这两者的之间的比 ...
- JQuery特效分享网站
各种jquery特效分享,可以去上面找资源. http://www.jqshare.com/
- 一款兼容IE6并带有多图横向滚动的jquery特效
一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...
随机推荐
- 【Python】引用计数
一.概述 要保持追踪内存中的对象,Python使用了引用计数这一简单的技术. 二.引用计数的增减 2.1 增加引用计数 当对象被创建并(将其引用)赋值给变量时,该对象的引用计数被设置为1. 对象的引用 ...
- HDU---BigZhuGod的粉丝
Problem Description 真正的粉丝,是不需要题目描述的^_^. Input 第一行输入数据组数T(1≤T≤100).接下来T行,每行一个有格式的字符串,详见样例,字符串长度不超过1 ...
- *CF2.D(哥德巴赫猜想)
D. Taxes time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...
- POJ1753 Flip Game(bfs、枚举)
链接:http://poj.org/problem?id=1753 Flip Game Description Flip game is played on a rectangular 4x4 fie ...
- asp.net 使用DroDownList来实现二级联动
今天做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件. ...
- C#_技巧:字符串分组排序
思想//GroupBy+ToDictionary实现Dictionary<> List<string> list = new List<string>(); //l ...
- asp.net identity UserSecurityStamp 的作用
UserSecurityStamp 主要是用来对用户安全相关信息做一个快照. 在使用asp.net identity 的 CreateAsync(TUser user) 创建一个用户的时候,如果开启了 ...
- .NET面试题系列[15] - LINQ:性能
.NET面试题系列目录 当你使用LINQ to SQL时,请使用工具(比如LINQPad)查看系统生成的SQL语句,这会帮你发现问题可能发生在何处. 提升性能的小技巧 避免遍历整个序列 当我们仅需要一 ...
- 基础知识漫谈(2):从设计UI框架开始
说UI能延展出一丢丢的东西来,光java就有swing,swt/jface乃至javafx等等UI toolkit,在桌面上它们甚至都不是主流,在web端又有canvas.svg等等. 基于这些UI工 ...
- UI控件(UIPickerView)
@implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; _item1 = [[NSArray alloc]i ...