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. easyconf——基于AugularJS的配置管理系统开发框架

    目录 1 easyconf的诞生2 easyconf的设计理念 2.1 总体设计 2.2 细节设计 2.2.1 CRUD操作 2.2.2 即时校验 2.2.3 下拉框设计3 easyconf使用指南 ...

  2. Android最大可运行内存

    int maxMemory = (int) Runtime.getRuntime().maxMemory();

  3. 【dubbo】zookeeper搭建

    依赖java JDK,需提前安装1.6及以上版本 1.下载zookeeper (3.4.9) 2.设置配置文件\zookeeper-3.4.9\zookeeper-3.4.9\conf\zoo.cfg ...

  4. 基于OpenCv的人脸检测、识别系统学习制作笔记之三

    1.在windows下编写人脸检测.识别系统.目前已完成:可利用摄像头提取图像,并将人脸检测出来,未进行识别. 2.在linux下进行编译在windows环境下已经能运行的代码. 为此进行了linux ...

  5. disconf使用

    1.创建app,确定version 2.创建配置文件redis.config 3.选择app下env环境,上传redis.config到disconf 4.创建disconf.properties到c ...

  6. (转)Android开发出来的APP在手机的安装路径是？

    一.安装路径在哪? Android应用安装涉及到如下几个目录: system/app系统自带的应用程序,无法删除.data/app用户程序安装的目录,有删除权限.安装时把apk文件复制到此目录.dat ...

  7. DateTime与DateTime?赋值问题以及null类型的如何赋值问题

    解决方案: //主要用到向下兼容原理,DateTime?继承于DateTime: string req = "为字符串的参数"; DateTime? dt = null; Date ...

  8. Java jstatd详解

    jstatd 命令全称: Virtual Machine jstat Daemon DESCRIPTION The  jstatd tool is an RMI server application ...

  9. 新版SDWebImage的使用

    第一步,下载SDWebImage,导入工程.github托管地址https://github.com/rs/SDWebImage 第二步,在需要的地方导入头文件 1 #import "UII ...

  10. 【转】C#Winform程序如何发布并自动升级（图解）

    有不少朋友问到C#Winform程序怎么样配置升级,怎么样打包,怎么样发布的,在这里我解释一下打包和发布关于打包的大家可以看我的文章C# winform程序怎么打包成安装项目(图解)其实打包是打包,发 ...