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. SQL Server 事务、异常和游标

    转自:http://www.cnblogs.com/hoojo/archive/2011/07/19/2110325.html Ø 事务 在数据库中有时候需要把多个步骤的指令当作一个整体来运行,这个整 ...

  2. 图层的核心动画（CABaseAnimation）续

    Main.storyboard ViewController.m // //  ViewController.m //  8A01.核心动画 // //  Created by huan on 16/ ...

  3. 天气预报API(四)：全国城市代码列表（“新编码”）

    说明 天气预报API系列文章涉及到的天气网站10个左右,只发现了中国气象频道和腾讯天气城市代码参数特别: 暂且称 中国气象频道.腾讯天气使用的城市代码为 "新编码" 注:中国气象频 ...

  4. React Native填坑之旅--Navigation篇

    React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS.我们这里只讨论通用的Navigator.会了Naviga ...

  5. DVDstore 数据库基准测试

    1 DVDStore介绍 DVDstore 是一个电子商务测试应用,模拟多用户登陆在线系统,搜索DVD,购买DVD.多用来用作测试数据库性能或者其他的压力测试. 2 快速浏览测试步骤 (a)  安装数 ...

  6. 部署额外域控制器,Active Directory

      部署额外域控制器 转自:http://yuelei.blog.51cto.com/202879/117599 如果域中只有一台域控制器,一旦出现物理故障,我们即使可以从备份还原AD,也要付出停机等 ...

  7. <c:if>标签的使用-流程控制标签

    <c:if>标签必须要有test属性,${ }表达式为ture,则执行body内容;否则不执行. 原始代码: <c:if test="${all == 1}"&g ...

  8. WWDC2016的一点个人想法

    看了游戏审核的新闻和WWDC,感觉个人游戏开发者会很难混下去了,WWDC里面iMessage 透露出来的信息,我感觉微信有竞争者了,假如苹果把iMessage 打造成微信那种模式(聊天+第三方接入), ...

  9. (01背包变形) Cow Exhibition （poj 2184）

    http://poj.org/problem?id=2184   Description "Fat and docile, big and dumb, they look so stupid ...

  10. runtime记录

    前言: 最初对于runtime的了解其实只停留在,知道这是一组C的方法,知道消息机制中会把方法调用转成objc_msgSend(theObject,@selector(objectMethod)).随 ...