Ещё одну демку набросал
можно менять стили div
щелчок по div работает аналогично reset
Демонстрирует как менять стили
демонстрирует использование контролёра в директиве
демонстрирует применение watch
а также тонкости взаимодействия control и link
в частности необходимость вызова $scope.$apply() если меняешь scope из link
Демонстрирует применение шаблонов
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script language="javascript" type="text/javascript">
//Обьявим модуль
var myApp=angular.module('myApp', []);
//создадим дерективу
myApp.directive('demo',function(){
return {
//значит что это элемент, тоесть демо <demo>
restrict:"E",
//здесь можно установить связь атрбутов со свойствами scope
scope:{
},
//печалька метод find содержит всего одну строчку element.getElementsByTagName(selector), нету поиска по классу
link:function($scope,el,attrs,ctrl){
el.find('div')[0].addEventListener('click',function(){
//вызовем метод сброса
$scope.reset();
//затем чтобы данные из изменённого scope применились к html придётся вызвать метод $apply
$scope.$apply();
});
},
controller:function($scope){
//здесь храним стиль
$scope.divstyle={};
//Сьрасывает свойство на настройки по умолчанию
$scope.reset=function(){
$scope.width="100";
$scope.height="100";
$scope.border="1";
$scope.divstyle["background-color"]="#0f0";
}
$scope.reset();
// я отслеживаю изменения свойств при помощи $watch,
// так как к некотрым свойствам нужно дописывать px или что то ещё
//добавляем px к width
$scope.$watch('width', function() {
$scope.divstyle.width=$scope.width+"px";
});
//добавляем px к height
$scope.$watch('height', function() {
$scope.divstyle.height=$scope.height+"px";
});
//формируем border
$scope.$watch('border', function() {
$scope.divstyle.border="solid "+$scope.border+"px";
});
// Вместо нескольких $watch мы могли использовать и один
// $scope.$watch(function(){
// $scope.divstyle.border="solid "+$scope.border+"px";
// $scope.divstyle.height=$scope.height+"px";
// $scope.divstyle.width=$scope.width+"px";
// });
},
//шаблон котрый будет помещён в демо
template:
"<div ng-style='divstyle' class='demobox'></div>"+
"<div style='position:absolute;right:10px;top:0px;'>"+
"width:<input ng-model='width' type='range' max='800'/><br/>"+
"height:<input ng-model='height' type='range' max='800'/><br/>"+
"background-color:<input ng-model='divstyle["+'"background-color"'+"]' type='color'/><br/>"+
"border:<input ng-model='border' type='range' max='50'/><br/>"+
"<button ng-click='reset()'>reset</button>"+
"</div>"
}
});
</script>
</head>
<body >
<!-- вот так вот дериктива используется в приложении -->
<demo> </demo>
</body>
</html>