angularjs可交互的directive

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

html

    
rn-stepper demo (1/5){
    {rating}}
        Model value : {
    { rating }}
        Form Has been modified : {
    { form.$dirty }}        
    
    
    

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: '-' +                  '
    
' +                  '+',        //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);          };        }    };});

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