angular指令的简单练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>quick work</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="../angular-1.4.1/angular-1.4.1/angular.js"></script>
<style type="text/css">
*{
margin: 0 auto;
padding: 0px;
}
li{
list-style: none;
}
.total {
width: 640px;
height: auto;
border:1px solid #333;
}
.total_top{
border : 1px solid #333;
margin: 20px;
height: 100px;
overflow: hidden;
}
.total_bottom {
width: 100%;
height: 60px;
border-top: 1px solid #333;
display: inline-flex;
align-items: center;
}
ul {
width: 400%;
height: 100px;
overflow: hidden;
}
.moveDiv{
height: 100px;
width: 100%;
}
ul li{
height: 100%;
display: block;
float: left;
}
.total_bottom span {
font-size: 20px;
color: #000;
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
cursor: pointer;
margin: 0px;
}
.total_bottom_left{
border-right: 1px solid #333;
float: left; }
.total_bottom_right{
border-left: 1px solid #333;
float: right; }
.bottom_cen {
margin: 0 auto;
text-align: center;
float: left;
}
.bottom_cen a{
width: 15px;
height: 5px;
background-color: #000;
float: left;
margin-right: 10px;
}
</style>
</head>
<body ng-app = "quickApp">
<div ng-controller = "quickController">
<div class="total">
<total-content dataset-data = "totalData" li-width = "width" clickindex = "clickM(index)"></total-content>
<!-- <div class="total_top">
<ul>
<li ng-repeat = "data in totalData">{{data.content}}</li>
</ul>
</div>
<div> <quick-boor dataset-data = "totalData" ></quick-boor>
</div> -->
</div>
</div>
</body>
<script type="text/javascript">
var app =angular.module("quickApp",[]);
app.controller("quickController",function($scope,$timeout){
$timeout(function() {
angular.element(".total_top ul li").css({"width" : $(".total_top").width() + "px"});
$scope.width = $(".total_top").width();
});
$scope.totalData = [{
"content" : "111111111"
},{
"content" : "222222222"
},{
"content" : "3333333333"
}];
// --------1
// $scope.clickM = function(index){
// angular.element(".total_top ul").stop().animate({marginLeft : - $scope.width * index + "px"},500);
// }
})
.directive("totalContent",function($timeout){
return {
restrict : 'E',
replace : true,
scope : {
datasetData : "=",
liWidth : "="
// liWidth : "=", ------1
// clickindex : "&" -----1
},
template : '<div><div class="total_top">'+
'<ul>'+
'<li ng-repeat = "data in datasetData">{{data.content}}</li>'+
'</ul>'+
'</div><div class="total_bottom">' +
'<span class="total_bottom_left" ng-click = "onClickLeft()"><</span>'+
'<div class="bottom_cen">' +
// ng-click="clickindex({index : $index}) 1
'<a href="#" ng-repeat = "data in datasetData" ng-click="clickindex($index)"></a>' +
'</div>' +
'<span class="total_bottom_right" ng-click = "onClickRight()">></span>' +
'</div>' +
'</div></div>',
link : function(scope,elem,attrs) {
// $timeout(function() {
// angular.element(".total_top ul li").css({"width" : angular.element(".total_top").width() + "px"});
// scope.width = angular.element(".total_top").width();
// }); scope.index = 0; scope.clickindex = function(index){
scope.index = index
angular.element(".total_top ul").stop().animate({marginLeft : - scope.liWidth * index + "px"},500);
}
scope.onClickLeft = function(){
if(scope.index < angular.element(".total_top ul li").length - 1 && scope.index >= 0){
scope.index ++;
angular.element(".total_top ul").stop().animate({marginLeft : - scope.liWidth * scope.index + "px"},500); } }
scope.onClickRight = function(){
if(scope.index <= angular.element(".total_top ul li").length - 1 && scope.index > 0){
scope.index --;
angular.element(".total_top ul").stop().animate({marginLeft : - scope.liWidth * scope.index + "px"},500); }
}
}
}
})
</script>
</html>
一个简单的指令练习，主要实现的功能是点击事件，内容滚动。
点击左右的方框箭头，可以使内容滚动，或者点击中间的小长方形条，也可以使得内容滚动起来。
如下图是界面显示效果
对于指令中的作用域 “”=“”：表示与父scope中的属性进行双向数据绑定
对于指令中的作用域 “”&“”：表示与父scope中的函数进行传递，稍后进行调用
对于指令中的作用域 “”@“”：表示把当前属性作为字符串传递实现指令与html页面元素关联
angular指令的简单练习的更多相关文章
- angular指令浅谈
今天在闲暇时间再次对angularjs的指令进行了初探,不探不知道一探吓一跳啊, 就一个简单的指令整整难住我了两个小时,先不说代码的逻辑是否复杂,就一些内部的一些实现让我看起来都是头疼的不行啊,不过最 ...
- angular指令
转自:http://www.cnblogs.com/rohelm/p/4051437.html 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整 ...
- Angular4 后台管理系统搭建（9） - 用自定义angular指令，实现在服务端验证
最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...
- angular指令之complie和link不得不说的故事
angular指令比较晦涩难懂的就是complie和link字段了,什么时候该用complie?什么时候该用link?总是很难分别清楚.当理解了指令的真正编译原理的时候,就会发现这相当的简单. ng怎 ...
- angular指令深度学习篇
angular指令深度学习-过滤器 limitTo ... <body ng-app="app" > <div ng-controller="myCtr ...
- Angular指令渗透式理解
通过一段时间对angular指令的使用,理解了angular指令的意义,下面逐一介绍一下. ng-app:定义一个angualr模块,表示angular作用的范围,如下代码: ng-app在html标 ...
- 20155219--pwd指令的简单实现
pwd指令的简单实现 pwd命令作用 Linux中用** pwd **命令来查看"当前工作目录"的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确 ...
- 【转】angular指令入坑
独立作用域和函数参数 通过使用本地作用域属性,你可以传递一个外部的函数参数(如定义在控制器$scope中的函数)到指令.这些使用&就可以完成.下面是一个例子,定义一个叫做add的本地作用域属性 ...
- Angular指令1
Angular的指令 也就是directive,其实就是一WebComponent,以前端的眼光来看,好象很复杂,但是以后端的眼光来看,还是非常简单的.其实就是一个中等水平的类. var myModu ...
随机推荐
- iOS正确使用const,static,extern
static 修饰局部变量 让局部变量只初始化一次 局部变量在程序中只有一份内存 并不会改变局部变量的作用域,仅仅是改变了局部变量的生命周期(只到程序结束,这个局部变量才会销毁) 修饰全局变量 全局变 ...
- PHP之回调函数传参(解决eval函数拼接对象参数的问题)
在使用Smarty时,定义了一个统一调用控制器的函数,如下: function C($name, $method){//控制器的名称和其中方法的名称 require_once "contro ...
- ModelForm
这是一个神奇的组件,通过名字我们可以看出来,这个组件的功能就是把model和form组合起来,对,你没猜错,相信自己的英语水平. 先来一个简单的例子来看一下这个东西怎么用: 比如我们的数据库中有这样一 ...
- asp.net C# 实现微信服务器配置
微信服务器配置接收页面示例代码 /// <summary> /// 微信的Token /// </summary> const string Token = "Tok ...
- 跟着弦哥学人工智能2—HAND-CRAFTED RULES实现的人工智能及其缺陷
隔壁有个妹纸喷我,好高兴....给她回复了下 哎呀,没想到是个妹纸,其实我就随便那么一说,没合计妹纸还专门写个檄文声讨我,受宠若惊其实你的评论一看就比较专业,所以我就去你博客大概扫了一眼,发现个大问 ...
- jstl 中 <c:foreach> 多级循环
- 快速部署MongoDB
MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案.本文安装的版本为3.0,其他版本可对照. 设置mongodb repo vi /e ...
- Oracle结合Mybatis实现取表中前10条数据
之前一直使用mysql和informix数据库,查表中前10条数据十分简单: 最原始版本: select top * from student 当然,我们还可以写的复杂一点,比如外加一些查询条件? 比 ...
- （转）Spark性能优化：资源调优篇
在开发完Spark作业之后,就该为作业配置合适的资源了.Spark的资源参数,基本都可以在spark-submit命令中作为参数设置.很多Spark初学者,通常不知道该设置哪些必要的参数,以及如何 ...
- Numpy数组索引为-1和None
numpy的数组操作方便,可以用:来切片,用布尔数组或者布尔表达式来查找符合条件的数据,也可以用数组作为另一个数组的索引来查找指定的数据.但有时也会见到数组索引为-1和None.两者的用法如下: 1. ...