angularjs可交互的directive

http://jsfiddle.net/revolunet/s4gm6/

directive开发上手练手，以注释的方式说明

html

<body ng-app="demo" ng-controller="demoController">

    <h3>rn-stepper demo (1/5){{rating}}</h3>

        Model value : {{ rating }}<br>

        Form Has been modified : {{ form.$dirty }}

        <hr>

    <div ng-model="rating" rn-stepper></div>

</body>

css

body {

 font-family: 'Roboto', sans-serif;

}

$stepper-height: 40px;

$stepper-value-width: 40px;

$stepper-button-width: 40px;

$stepper-border-width: 1px;

$stepper-button-bg: #4D4DFF;

$stepper-value-bg: #eee;

div[rn-stepper] {

    border:1px solid #bbb;

    display:inline-block;

    height:$stepper-height + ($stepper-border-width * 2);

    box-sizing:border-box;

    button {

        appearance:none;

        -webkit-appearance:none;

        margin:0;

        border:0;

        width: $stepper-button-width;

        height:$stepper-height;

        box-sizing:border-box;

        background: $stepper-button-bg;

        color: white;

        font-weight:bold;

        font-size:20px;

         outline: none;

        &:active {

            box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.25);

            background: darken($stepper-button-bg, 5%);

       }

    }

    div {

        vertical-align:top;

        width:$stepper-value-width;

        background:$stepper-value-bg;

        text-align:center;

        display:inline-block;

        height:$stepper-height;

        line-height:$stepper-height;

        box-sizing:border-box;

    }

}

javascript

angular.module('demo', [])

.controller('demoController',['$scope',function($scpoe){

$scpoe.rating=52;

}])

.directive('rnStepper', function() {

    return {

        restrict: 'AE',

        require:'ngModel',/*使用属性模式调用，依赖了ngModel指令*/

        scope:{},

        template: '<button ng-click="decrement()">-</button>' +

                  '<div></div>' +

                  '<button ng-click="increment()">+</button>',

        //link函数可以接受require指令的controller，ngModelController

        link:function(scope,element,attrs,ngModelController){

          //利用ngModel指令的controller我们可以利用他的方法很多事情

          ngModelController.$render=function(){

                element.find('div').text(ngModelController.$viewValue);

          };

          function updateModel(offset){

          	ngModelController.$setViewValue(ngModelController.$viewValue+offset);

            ngModelController.$render();

          };

          scope.decrement=function(){

          	updateModel(-1);

          };

          scope.increment=function(){

          	updateModel(1);

          };

        }

    };

});

学习的最好办法就是，多练习，照抄都行 -- 莎撤丹斯基

angularjs可交互的directive的更多相关文章

  1. AngularJS系统学习之Directive（指令）

    本文转自https://www.w3ctech.com/topic/1612 原文作者: Nicolas Bevacqua 原文:AngularJS’ Internals In Depth, Part ...

  2. AngularJS入门心得1——directive和controller如何通信

    粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...

  3. angularjs学习笔记三——directive

    AngularJS 通过被称为 指令 的新属性来扩展 HTML. 正如你所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性. HTML5 允许扩展的(自制的)属性,以 data- ...

  4. AngularJS学习笔记之directive—scope选项与绑定策略

    From:http://www.linuxidc.com/Linux/2015-05/116924.htm scope:{}使指令与外界隔离开来,使其模板(template)处于non-inherit ...

  5. 利用angularJs自定义指令（directive）实现在页面某一部分内滑块随着滚动条上下滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

  6. AngularJS学习笔记之directive——scope选项与绑定策略

    开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细 ...

  7. angularjs springMVC 交互

    AngularJS中的$resource使用与Restful资源交互 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数 ...

  8. AngularJs(Part 11)--自定义Directive

    先对自定义Directive有一个大体的映像 myModule.directive('myDirective',function(injectables){ var directiveDefiniti ...

  9. angularJs自定义指令（directive）实现滑块滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

随机推荐

  1. 谷歌CEO发布年度公开信：专注人工智能等6大业务领域

  2. C#基于Office组件操作Excel

    1.    内容简介 实现C#与Excel文件的交互操作,实现以下功能: a)     DataTable 导出到 Excel文件 b)     Model数据实体导出到 Excel文件[List&l ...

  3. BZOJ4170 极光（CDQ分治 或 树套树）

    传送门 BZOJ上的题目没有题面-- [样例输入] 3 5 2 4 3 Query 2 2 Modify 1 3 Query 2 2 Modify 1 2 Query 1 1 [样例输出] 2 3 3 ...

  4. selenium总结篇，常见方法和页面元素的操作【转】

    原文:http://www.cnblogs.com/tobecrazy/p/4570494.html 今天,总结一下selenium怎么操作web页面常见的元素. 主要有: 上传 alter dial ...

  5. code review作业

    下面是对结对编程队友12061166 宋天舒的code review 五个优点: 1.代码的风格优秀,注释不多,但是必要的注释还是有的,比如: // 三种模式 // mode1仅统计单个单词 // m ...

  6. JS设计模式初探

    目的:设计模式众多,尝试用博客记录下学到的不同设计模式的优劣,方便以后查阅. 前言:半年前看高程的时候看到设计模式这章,云里雾里,不是看不明白,而是不明白为啥要如此麻烦只为创建一个对象.直到最近完成了 ...

  7. 像素&分辨率

    1.像素 是组成图像的基本单元:点 2.分辨率 是指在长和宽的两个方向上各拥有的像素的个数. 3.一张640*480的图片,表示图片在每个长度方向上都有640个像素,在宽度方向上都有480个像素,总数 ...

  8. easyui 折叠数据表格使用

    因为要用到折叠数据表格 但是官网上的例子不能展示 费了好大劲 走了很多弯路 现在能显示出数据 以前大多都是看别人写的文章 自己解决问题的时候几乎没记录过 现在想想真不是好习惯 特此记录分享出来 有需要 ...

  9. Xamarin开发Android笔记：拍照或相册选取图片角度问题

    在开发Android应用的时候,可能会遇到类似微信朋友圈中拍照或相册选取图片的场景,拍照或选取图片之后在显示的时候却发现图片的角度不对,明明是竖版拍照,显示出来缺失躺着的. 这是因为在某些特定手机上例 ...

  10. DataPager 分页样式（css）

    <asp:DataPager ID="> <Fields> <asp:NextPreviousPagerField ShowFirstPageButton=&q ...