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. 20151013 C# 第一篇 流程控制语句

    20151013 流程控制语句: 1.选择语句 if … else if...else 选择语句 if(布尔表达式){  语句块:} if(布尔表达式){  语句块1:}else{  语句块2:} i ...

  2. [转] 多进程下数据库环境的恢复：DB_REGISTER

    http://www.cnblogs.com/promise6522/archive/2012/05/09/2493542.html

  3. 洛谷P1330 封锁阳光大学

    题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构成的无向图,N个点之间由M ...

  4. oracle高阶知识点

    ------------------------------------------------- varchar2(4000)字符型,最大长度不能超过4000,与char的区别是不用空格补足 num ...

  5. Cordova for iOS[ PhoneGap]

    安装这个费了点劲,和早前的PhoneGap有些不同. Cordova支持如下移动操作系统:iOS, Android,ubuntu phone os, Blackberry, Windows Phone ...

  6. Apache Shiro (一)

    参考博客: http://jinnianshilongnian.iteye.com/blog/2018398 1.shiro简介 Apache shiro 是一个JAVA框架,可用于身份难和授权.sh ...

  7. Matlab 运行C程序出现的编译出错问题

    2016-03-18 17:18:34 最近在运行一些公开的Matlab代码包时,比如LibSVM.crfChain等,遇到了需要在Matlab环境下编译C程序的问题,对于我所遇到的问题,给出以下解决 ...

  8. 前台传参数时间类型不匹配:type 'java.lang.String' to required type 'java.util.Date' for property 'createDate'

    springMVC action接收参数: org.springframework.validation.BindException: org.springframework.validation.B ...

  9. Restful.Data v1.0 - 轻量级数据持久层组件, 正式开源发布了

    经过几个星期的优化调整,今天 Restful.Data 正式开源发布. 源码地址:https://github.com/linli8/Restful 今天不写那么多废话了,还是重新介绍一下 Restf ...

  10. [Asp.net 开发系列之SignalR篇]专题六：使用SignalR实现消息提醒

    一.引言 前面一篇文章我介绍了如何使用SignalR实现图片的传输,然后对于即时通讯应用来说,消息提醒是必不可少的.现在很多网站的都有新消息的提醒功能.自然对于SignalR系列也少不了这个功能的实现 ...