1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>quick work</title>
  6.   <script type="text/javascript" src="../jquery.js"></script>
  7.   <script type="text/javascript" src="../angular-1.4.1/angular-1.4.1/angular.js"></script>
  8.   <style type="text/css">
  9.     *{
  10.       margin: 0 auto;
  11.       padding: 0px;
  12.     }
  13.     li{
  14.       list-style: none;
  15.     }
  16.     .total {
  17.       width: 640px;
  18.       height: auto;
  19.       border:1px solid #333;
  20.     }
  21.     .total_top{
  22.       border : 1px solid #333;
  23.       margin: 20px;
  24.       height: 100px;
  25.       overflow: hidden;
  26.     }
  27.     .total_bottom {
  28.       width: 100%;
  29.       height: 60px;
  30.       border-top: 1px solid #333;
  31.       display: inline-flex;
  32.       align-items: center;
  33.     }
  34.     ul {
  35.       width: 400%;
  36.       height: 100px;
  37.       overflow: hidden;
  38.     }
  39.     .moveDiv{
  40.       height: 100px;
  41.       width: 100%;
  42.     }
  43.     ul li{
  44.       height: 100%;
  45.       display: block;
  46.       float: left;
  47.     }
  48.     .total_bottom span {
  49.       font-size: 20px;
  50.       color: #000;
  51.       display: block;
  52.       width: 60px;
  53.       height: 60px;
  54.       text-align: center;
  55.       line-height: 60px;
  56.       cursor: pointer;
  57.       margin: 0px;
  58.     }
  59.     .total_bottom_left{
  60.       border-right: 1px solid #333;
  61.       float: left;
  62.  
  63.     }
  64.     .total_bottom_right{
  65.       border-left: 1px solid #333;
  66.       float: right;
  67.  
  68.     }
  69.     .bottom_cen {
  70.       margin: 0 auto;
  71.       text-align: center;
  72.       float: left;
  73.     }
  74.     .bottom_cen a{
  75.       width: 15px;
  76.       height: 5px;
  77.       background-color: #000;
  78.       float: left;
  79.       margin-right: 10px;
  80.     }
  81.   </style>
  82. </head>
  83. <body ng-app = "quickApp">
  84.     <div ng-controller = "quickController">
  85.         <div class="total">
  86.           <total-content dataset-data = "totalData" li-width = "width" clickindex = "clickM(index)"></total-content>
  87.           <!-- <div class="total_top">
  88.             <ul>
  89.               <li ng-repeat = "data in totalData">{{data.content}}</li>
  90.             </ul>
  91.           </div>
  92.           <div>
  93.  
  94.             <quick-boor dataset-data = "totalData" ></quick-boor>
  95.           </div> -->
  96.         </div>
  97.     </div>
  98. </body>
  99. <script type="text/javascript">
  100.   var app =angular.module("quickApp",[]);
  101.   app.controller("quickController",function($scope,$timeout){
  102.     $timeout(function() {
  103.       angular.element(".total_top ul li").css({"width" : $(".total_top").width() + "px"});
  104.       $scope.width = $(".total_top").width();
  105.     });
  106.     $scope.totalData = [{
  107.       "content" : "111111111"
  108.     },{
  109.       "content" : "222222222"
  110.     },{
  111.       "content" : "3333333333"
  112.     }];
  113.     // --------1
  114.     // $scope.clickM = function(index){
  115.     //   angular.element(".total_top ul").stop().animate({marginLeft : - $scope.width * index + "px"},500);
  116.     // }
  117.   })
  118.   .directive("totalContent",function($timeout){
  119.     return {
  120.       restrict : 'E',
  121.       replace : true,
  122.       scope : {
  123.         datasetData : "=",
  124.         liWidth : "="
  125.         // liWidth : "=",   ------1
  126.         // clickindex : "&"   -----1
  127.       },
  128.       template : '<div><div class="total_top">'+
  129.             '<ul>'+
  130.               '<li ng-repeat = "data in datasetData">{{data.content}}</li>'+
  131.             '</ul>'+
  132.             '</div><div class="total_bottom">' +
  133.               '<span class="total_bottom_left" ng-click = "onClickLeft()"><</span>'+
  134.               '<div class="bottom_cen">' +
  135.               // ng-click="clickindex({index : $index})   1
  136.                 '<a href="#" ng-repeat = "data in datasetData" ng-click="clickindex($index)"></a>' +
  137.               '</div>' +
  138.               '<span class="total_bottom_right" ng-click = "onClickRight()">></span>' +
  139.             '</div>' +
  140.           '</div></div>',
  141.       link : function(scope,elem,attrs) {
  142.         // $timeout(function() {
  143.         //   angular.element(".total_top ul li").css({"width" : angular.element(".total_top").width() + "px"});
  144.         //   scope.width = angular.element(".total_top").width();
  145.         // });
  146.  
  147.         scope.index = 0;
  148.  
  149.         scope.clickindex = function(index){
  150.           scope.index = index
  151.           angular.element(".total_top ul").stop().animate({marginLeft : - scope.liWidth * index + "px"},500);
  152.         }
  153.         scope.onClickLeft = function(){
  154.           if(scope.index < angular.element(".total_top ul li").length - 1 && scope.index >= 0){
  155.             scope.index ++;
  156.             angular.element(".total_top ul").stop().animate({marginLeft : - scope.liWidth * scope.index + "px"},500);
  157.  
  158.           }
  159.  
  160.         }
  161.         scope.onClickRight = function(){
  162.           if(scope.index <= angular.element(".total_top ul li").length - 1 && scope.index > 0){
  163.             scope.index --;
  164.             angular.element(".total_top ul").stop().animate({marginLeft : - scope.liWidth * scope.index + "px"},500);
  165.  
  166.           }
  167.         }
  168.       }
  169.     }
  170.   })
  171. </script>
  172. </html>

一个简单的指令练习，主要实现的功能是点击事件，内容滚动。

点击左右的方框箭头，可以使内容滚动，或者点击中间的小长方形条，也可以使得内容滚动起来。

如下图是界面显示效果　　

对于指令中的作用域 “”=“”：表示与父scope中的属性进行双向数据绑定

对于指令中的作用域 “”&“”：表示与父scope中的函数进行传递，稍后进行调用

对于指令中的作用域 “”@“”：表示把当前属性作为字符串传递实现指令与html页面元素关联

angular指令的简单练习的更多相关文章

  1. angular指令浅谈

    今天在闲暇时间再次对angularjs的指令进行了初探,不探不知道一探吓一跳啊, 就一个简单的指令整整难住我了两个小时,先不说代码的逻辑是否复杂,就一些内部的一些实现让我看起来都是头疼的不行啊,不过最 ...

  2. angular指令

    转自:http://www.cnblogs.com/rohelm/p/4051437.html 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整 ...

  3. Angular4 后台管理系统搭建（9） - 用自定义angular指令，实现在服务端验证

    最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...

  4. angular指令之complie和link不得不说的故事

    angular指令比较晦涩难懂的就是complie和link字段了,什么时候该用complie?什么时候该用link?总是很难分别清楚.当理解了指令的真正编译原理的时候,就会发现这相当的简单. ng怎 ...

  5. angular指令深度学习篇

    angular指令深度学习-过滤器 limitTo ... <body ng-app="app" > <div ng-controller="myCtr ...

  6. Angular指令渗透式理解

    通过一段时间对angular指令的使用,理解了angular指令的意义,下面逐一介绍一下. ng-app:定义一个angualr模块,表示angular作用的范围,如下代码: ng-app在html标 ...

  7. 20155219--pwd指令的简单实现

    pwd指令的简单实现 pwd命令作用 Linux中用** pwd **命令来查看"当前工作目录"的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确 ...

  8. 【转】angular指令入坑

    独立作用域和函数参数 通过使用本地作用域属性,你可以传递一个外部的函数参数(如定义在控制器$scope中的函数)到指令.这些使用&就可以完成.下面是一个例子,定义一个叫做add的本地作用域属性 ...

  9. Angular指令1

    Angular的指令 也就是directive,其实就是一WebComponent,以前端的眼光来看,好象很复杂,但是以后端的眼光来看,还是非常简单的.其实就是一个中等水平的类. var myModu ...

随机推荐

  1. 【转】ARM vs X86 – Key differences explained!

    原文:http://www.androidauthority.com/arm-vs-x86-key-differences-explained-568718/ Android supports 3 d ...

  2. 【20171027早】alert(1) to win 第9,10,11,12题

    人在江湖,不服就干! 第9题: function escape(s) { function htmlEscape(s) { return s.replace(/./g, function(x) { r ...

  3. java springmvc+bui+bootstrap后台管理系统搭建

    先来说说bui,这个框架是阿里巴巴的一个前端团队研发的,能够用很少的代码快速搭建一个后台管理系统,很适做管理平台的开发, 之前用过类似这样的框架extjs,做个比较,这个框架实现功能比extjs的代码 ...

  4. Java并发编程--线程池

    1.ThreadPoolExecutor类 java.uitl.concurrent.ThreadPoolExecutor类是线程池中最核心的一个类,下面我们来看一下ThreadPoolExecuto ...

  5. 【XML】xStream浅录

    XStream可以用来转换对象-XML,或者XML-对象. 官网地址:http://x-stream.github.io 小案例: 实体类 FileVo.java package cn.pinnsvi ...

  6. Windows环境下多线程编程原理与应用读书笔记（7）————事件及其应用

    <一>事件 事件主要用于线程间传递消息,通过事件来控制一个线程是处于执行状态还是处于挂起状态. 事件和互斥量之间的差别: 事件主要用于协调两个或者多个线程之间的动作,使其协调一致,符合逻辑 ...

  7. oracle数据库显示所有用户方法

    sql>show user查看自己的是哪个用户sql>select * from all_users; 查询所有用户sql>select * from user_users;查询当前 ...

  8. sublime中配置Java 环境

    1.线安装jdk,并配置好环境变量2.创建批处理或Bash Shell脚本文件打开任意的文本编辑器,输入下面的内容,并保存为runJava.bat文件,然后把runJava.bat批处理文件移动到JD ...

  9. shadow dom 隔离代码 封装

    Shadow DOM是指浏览器的一种能力,它允许在文档(document)渲染时插入一棵DOM元素子树,但是这棵子树不在主DOM树中.   Shadow DOM 解决了 DOM 树的封装问题.     ...

  10. jsp静态与动态包含的区别和联系

    1. <%@ include file=” ”%>是指令元素.<jsp:include page=” ”/>是行为元素 2. 最终编译成java文件的数目不同. * 静态包含在 ...