Показать сообщение отдельно
  #17 (permalink)  
Старый 28.05.2013, 02:04
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Ещё одну демку набросал

можно менять стили 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>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 28.05.2013 в 04:01.
Ответить с цитированием