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. 无状态的web应用

    无意间看到这个话题,随便看了下 觉得有点意思.比较零散,记录一下. 1. http协议无状态. 简单的理解:每一个http请求都是独立的.不会因为前一个请求的失败就影响到下一个请求.既不会影响前面的, ...

  2. 「2014-3-13」Javascript Engine, Java VM, Python interpreter, PyPy – a glance

    提要: url anchor (ajax) => javascript engine (1~4 articles) => java VM vs. python interpreter =& ...

  3. linux bash中too many arguments问题的解决方法

    今天在编写shell脚本时,在if条件后跟的是[ $pid ],执行脚本的时候报 然后我输入改为[[$pid]]后,再执行脚本,就成功了,代码如下: #!/bin/bash pid=`ps -ef|g ...

  4. BZOJ2683 简单题（CDQ分治）

    传送门 之前听别人说CDQ分治不难学,今天才知道果真如此.之前一直为自己想不到CDQ的方法二很不爽,今天终于是想出来了一道了,太弱-- cdq分治主要就是把整段区间分成两半,然后用左区间的值去更新右区 ...

  5. Main()

    P25 “每一个c#可执行文件都必须有一个入口——Main()方法” 我一直对这个Main()方法有一些疑问. 那就是这里头的参数. 在JAVA里,main(String args[])中的参数是绝对 ...

  6. String、String.valueOf、toString 它们三者的区别总结

    今天在使用这个的时候发现,他们三者好像在某些场所都是可以用的,但是不免会让人想到那既然它们三者这么的相似,那么总有些什么区别吧.我也在网上找了一些资料看.自己也看了API文档,就将他们三的区别总结一下 ...

  7. 要做linux运维工程师的朋友，必须要掌握以下几个工具才行 ...

    要做linux运维工程师的朋友,必须要掌握以下几个工具才行 ...  [复制链接]   发表于 2013-12-13 15:59 | 来自  51CTO网页 [只看他] 楼主           本人 ...

  8. WPF快速入门系列(8)——MVVM快速入门

    一.引言 在前面介绍了WPF一些核心的内容,其中包括WPF布局.依赖属性.路由事件.绑定.命令.资源样式和模板.然而,在WPF还衍生出了一种很好的编程框架,即WVVM,在Web端开发有MVC,在WPF ...

  9. 基于uploadify.js实现多文件上传和上传进度条的显示

    uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制.文件类型.是否自动上传等属性,可以显示上传的进度条.官网地址是http://www.uploadify. ...

  10. Silverlight无法启动调试，错误“Unable to start debugging. The Silverlight Developer Runtime is not installed. Please install a matching version.” 解决办法

    今天调试Silverlight出现了以下错误: 意思是“无法启动调试,因为Silverlight Developer Runtime没有安装,请安装一个匹配的版本”.但是按Ctrl + F5可以调试运 ...