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- 40px;
$stepper-button- 40px;
$stepper-border- 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;
$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;
$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);
};
}
};
});
学习的最好办法就是，多练习，照抄都行 -- 莎撤丹斯基