Javascript.RU

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

Тот же самый пример что и в посте 6, но написан он иначе.
во первых теперь есть модуль
вместо mainControler использована фабрика(factory)
А контроллеры объявляются в модуле

<!doctype html>
<html ng-app="myApp">
  <head>
      <style>
        .bar{
             width:50px;      
             background-color:#0F0;      
             margin-right:5px;      
             float:left;
         }
      </style>

    <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.factory('Items',function(){         
        return [
          {label:"Африка",val:25},
          {label:"Европа",val:20}
        ]      
      })

      //контролёр таблицы
      myApp.controller('tableController',function($scope,Items){           
         $scope.items=Items;
        //добавляет строку в таблицу
        $scope.add=function(){                   
            $scope.items.push({val:0});                                
        };
 
         // метод не позволяет выставить больше 100%
        $scope.verife=function(item){         
          if (item.val>100) item.val=100;        
          if (item.val<0) item.val=0;        
        };
        
      });      
      
      //контролёр графика
      myApp.controller('chartController',function($scope,Items){                                 
        $scope.items=Items;        
      });      
      
    </script>
  </head>
  
  
  <body>
        
    <div ng-controller="chartController">      
            <div style="height:310px;background-color:#000;padding:5px;">

          <div class="bar" ng-repeat="item in items" style="height:{{item.val*3}}px; margin-top:{{300-item.val*3}}px;">

             {{item.val}}%

          </div>     
      </div>               
    </div>          

    <div ng-controller="tableController">
      <table>
        <tr ng-repeat="item in items">
          <td>
               <input ng-model="item.label"/></td> <td><input ng-model="item.val" ng-change="verife(item)"/>%
          </td>
        </tr>       
      </table>    
      <button ng-click="add()">Добавить запись </button>
      
    </div>    
    
  </body>
   
</html>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

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

dragable при помощи деректив

идея простая если к любому элементу добавить dragable, то его можно перемещать мышью
<!doctype html>
<html ng-app="myApp">
  <head>
    <style>
               .noselect {
		  -webkit-touch-callout: none;
		    -webkit-user-select: none;
		     -khtml-user-select: none;
		       -moz-user-select: none;
		        -ms-user-select: none;
		         -o-user-select: none;
		            user-select: none;
		}         
                .block{
                   width:50px;
                   height:50px;
                   cursor:move;
                }
    </style>

    <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('dragable',function(){                
        
        return function(scope,element,attr){          

          //метод срабатывает при mouseMove
          function move(e){
			element[0].style.top=e.y+"px";
			element[0].style.left=e.x+"px";			
		  };

          // срабатывает при отпускании мыши
		  function mouseUp(){
				document.removeEventListener('mousemove',move);
				document.removeEventListener('mouseUp',mouseUp);
		  }

		  //подпишимся на клик по элементу          
          element.bind('mousedown',function(){            
			//выставим позицию в absolute вдруг нестоит :)
            element[0].style.position="absolute";

			//подпишимся на перемещения мыши
            document.addEventListener('mousemove',move);

			//подпишимся на отпускание мыши
			document.addEventListener('mouseup',mouseUp);

          })                                	           
        }
          
      });
    </script>
  </head>
    
  <body class="noselect">    
    <div dragable style="background-color:#999;" class="block">drag me</div>
    <div dragable style="background-color:#99F;" class="block">drag me</div>
    <div dragable style="background-color:#F99;"  class="block">drag me</div>
    <div dragable style="background-color:#9F9;" class="block">drag me</div>

    <div style="background-color:#000;color:white; cursor:auto;" class="block">no drag</div>
  </body>
   
</html>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 27.05.2013 в 05:29.
Ответить с цитированием
  #13 (permalink)  
Старый 27.05.2013, 07:17
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 554

Панель инструментов. Пример, как обернуть jQuery-плагин директивой AngularJS
<!doctype html>
<html ng-app="Toolbar">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="http://paulkinzett.github.com/toolbar/js/jquery.toolbar.js"></script>
    <script>
      angular.module('Toolbar', [])
       .directive('toolbarTip', function() {
         return {
           link: function(scope, element, attrs) {
             // Функция link отдает в качестве параметра элемент, помеченный нашим атрибутом.
             // Оборачиваем этот элемент jQuery, и получаем из attrs значение атрибута.
             // Функция scope.$eval() вычисляет переданное ей выражение. В нашем случае 
             // просто превращает строку в массив с параметрами плагина
             $(element).toolbar(scope.$eval(attrs.toolbarTip));
           }
         };
       });
    </script>
    <link rel="stylesheet" type="text/css" href="http://paulkinzett.github.com/toolbar/css/toolbars.css"> 
    <style>
      #format-toolbar {
        margin-left: auto;
        margin-right: auto;
      }    
      #format-toolbar-options { display: none; }      
      .settings-button {
        width: 36px;
        height: 28px;
        border-radius: 5px;
        border: 1px solid #161615;
        box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
        opacity: 0.3;
        background-color: #343433;
        z-index: 2;
        display: block;
        margin: 60px 44px;
      }
      .settings-button:hover, .pressed {
        background-color: #343433;
        opacity: 0.7;
        cursor: pointer;
        z-index: 2;
      }
      .settings-button img {
        margin: 5px auto 0px auto;
        display: block;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <!-- Место, куда нужно щелкать, чтобы показалась панель инструментов -->
    <div id="format-toolbar" class="settings-button" toolbar-tip="{content: '#format-toolbar-options', position: 'top'}">
      <img src="http://paulkinzett.github.com/toolbar/img/icon-cog-small.png">
    </div>
    
    <!-- Код панели инструментов -->
    <div id="format-toolbar-options">
      <a href="#"><i class="icon-align-left"></i></a>
      <a href="#"><i class="icon-align-center"></i></a>
      <a href="#"><i class="icon-align-right"></i></a>
    </div>
  </body>
</html>
Ответить с цитированием
  #14 (permalink)  
Старый 27.05.2013, 15:19
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от DjDiablo
идея простая если к любому элементу добавить dragable, то его можно перемещать мышью
видел этот пример в доках

Сообщение от DjDiablo
Это вроде как оптимизация
да, смотрится забавно

Еще пример практически "из коробки". Позволяет делать элементы редактируемыми.

<!doctype html>
<html ng-app="directive">
  <head>
    <script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
    
    <script>
      angular.module('directive', []).directive('contenteditable', function() {
      return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
          // вид -> модель
          elm.bind('blur', function() {
            scope.$apply(function() {
              ctrl.$setViewValue(elm.html());
            });
          });
     
          // модель -> вид
          ctrl.$render = function(value) {
            elm.html(value);
          };
     
          // загрузка начального значения из DOM
          ctrl.$setViewValue(elm.html());
        }
      };
    });
    </script>
    
    <style>
      div[contentEditable] {
        cursor: pointer;
        background-color: #D0D0D0;
        margin-bottom: 1em;
        padding: 1em;
      }
    </style>
    
  </head>
  <body>
    <div contentEditable="true" ng-model="content">Измените текст</div>
    <pre>model = {{content}}</pre>
  </body>
</html>
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #15 (permalink)  
Старый 27.05.2013, 15:24
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

кстати, буквально рядом лежит тема на мой взгляд достаточно интересная Работа с таблицами на AngularJS
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #16 (permalink)  
Старый 28.05.2013, 00:28
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 554

Здесь целый выводок мелких примеров (исходники)

P.S. Пример с редактируемым текстом интересный. Видел где-то. Как раз собирался разобраться как они это в диве делают.

Последний раз редактировалось Shitbox2, 28.05.2013 в 00:30.
Ответить с цитированием
  #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.
Ответить с цитированием
  #18 (permalink)  
Старый 28.05.2013, 02:38
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 554

Тоже с $watch играюсь. Хочу, чтобы он отслеживал изменение всего списка, но при этом показывал какой именно элемент изменился. Пока приходится делать отдельный $watch для каждого элемента, что не очень нравится.
<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <script>
      angular.module('myApp',[])
 
      function TodoCtrl($scope) {
        $scope.todos = [
          {done: true, text: "foo"},
          {done: false, text: "bar"}
        ];
      }  
      function TodoItemCtrl($scope) {
        $scope.$watch('todos[$index]',
          function(newval, oldval, scope) {
            alert(
              "Изменен:" + $scope.todos[$scope.$index].text
            );
          }, true);
      }
    </script>
  </head>
  <body>
    <div ng-controller="TodoCtrl">
      <ul>
        <li ng-repeat="todo in todos" ng-controller="TodoItemCtrl">
          <input type="checkbox" ng-model="todo.done">
          {{todo.text}}
        </li>
      </ul>
    </div>
  </body>
</html>
Ответить с цитированием
  #19 (permalink)  
Старый 30.05.2013, 17:10
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Это несовсем демка, это небольшой опыт показывающий изоляцию scope. Если кто то собирается писать на ангуляре это одна из базовых вещей которую вы обязаны понимать.

есть три директивы experement1, experement2, demo
experement1 и experement2 вложены в demo
у каждой директивы свой scope

experement 1 имеет полный доступ к scope demo
experement 2 имеет доступ только к одному параметру родительского scope и какой это именно будет параметр определяется через атрибут param1

эксперементы кликабельны
а главный scope можно сбросить.

<!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('test',function(){                        
        return {
			restrict:"E",
	
			scope:{},

			controller:function($scope){				

				$scope.reset=function(){
					$scope.test1='root scope';
					$scope.test2='root scope';
				}
				$scope.reset();

			}

	   	}          
      });

	  // первый эксперемент 1
	  // имеет полный доступ к родительскому scope (так как нет scope:{} )
      myApp.directive('experement1',function(){                        
        return {
			restrict:"E",	

			controller:function($scope,$element){

				$element.bind('click',function(){
					$scope.test1="experement1";
					$scope.test2="experement1";
					$scope.$apply();
				})

				$scope.$watch ( function(){
					//alert('test1='+$scope.test1 +' test2='+ $scope.test2);
				});
			}
	   	}          
      });



	  // эксперемент 2
	  // имеет доступ только к однуму из свойств родительского scope, свойство будет доступен через param1
      myApp.directive('experement2',function(){                        
        return {
			restrict:"E",	
			scope:{
				//через param1 будет устанавливаться связь с родительским scope
				param1:"=" 
			},

			controller:function($scope,$element){

				$element.bind('click',function(){
					$scope.param1="experement2";
					$scope.test2="experement2";
					$scope.$apply();
				})

				$scope.$watch ( function(){
					//alert('param1='+$scope.param1 +' test2='+ $scope.test2);
				});
			}
	   	}          
      });

    </script>
  </head>
  
  
  <body >    

    <test>
	    <experement1 >
			{{'test1="'+test1 +'" test2="'+ test2+'"'}}  
		</experement1>

		 <br/><br/>

	    <experement2 param1="test1" >
			{{'param1="'+param1 +'" test2="'+ test2+'"'}}  
		</experement2> 

		<br/><br/>

		<button ng-click="reset()">reset</button>

	</test>

  </body>
   
</html>


в двух словах что вы видите.
experement1 полность отображает то что содержится в родительском scope
при клике он поменяет содержимое родительский scope
изменение родительского scope повлияет только на param1 из experement2

experement2 отображает только один из параметров test1 родительского scope, при помощи param1
при клике он поменяет только test1
изначально test2 пуст так как он несвязан с родительским scope
если в test2 будет установлено значение то оно не как не будет связано с родительским scope, тоесть свойство будет принадлежать именно scope experement2
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

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

Опираясь на вышеприведённый материал
я переписал демку таблицы и графика

теперь таблица и графики это независимые, никак несвязанные компоненты, которые можно применять в любом приложении независимо друг от друга. Также можно применять вместе и соединять из в произвольном порядке.

компоненты будут связаны если у них будет общий datasource

<!doctype html>
<html ng-app="myApp">
  <head>

 <style>

        .bar{
             width:50px;     
             background-color:#0F0;     
             margin-right:5px;     
             float:left;
         }

      </style>

    <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <script language="javascript" type="text/javascript">

	  //====================================================================================//
	  //==================================== ПРИЛОЖЕНИЕ ====================================//
	  //====================================================================================//

  
      //Обьявим модуль
      var myApp=angular.module('myApp', ['qChart','qTable']);

      //данные
      myApp.factory('Items',function(){        
          return [
              {label:"Африка",val:25},
              {label:"Европа",val:20}
          ]     
      }) 

      //контролер приложения
      myApp.controller('appCtrl',function($scope,Items){   
          $scope.items=Items;
			
      });


      //====================================================================================//
      //=================================== мОДУЛЬ TABLE===================================//
      //====================================================================================//


      var qTable=angular.module('qTable', []);

      qTable.directive('qtable',function(){                        
          return {
              restrict:"E",	
                 scope:{
                 datasource:"=" 
              },
              controller:function($scope){			
                 //добавляет строку в таблицу
                 $scope.add=function(){                  
                 $scope.datasource.push({val:0});                               
              };

              // метод не позволяет выставить больше 100%	
              $scope.verife=function(item){        
                if (item.val>100) item.val=100;       	
                if (item.val<0) item.val=0;       
              };
          },

          template:
                    '<table>'
                     +'<tr ng-repeat="item in datasource">'
                        +'<td>		'
			               +'<input ng-model="item.label"/></td> <td><input ng-model="item.val" ng-change="verife(item)"/>%'			
                        +'</td>'			
                     +'</tr> '			
                  +'</table>'			
                  +'<button ng-click="add()">Добавить запись </button>'
          }          
      });

      //====================================================================================//
      //=================================== мОДУЛЬ CHART===================================//
      //====================================================================================//

      var qChart=angular.module('qChart', []);
      qChart.directive('qchart',function(){                        
        return {
            restrict:"E",	
            scope:{
                //через param1 будет устанавливаться связь с родительским scope
                datasource:"=" 
            },

            template:
              '<div style="height:310px;background-color:#000;padding:5px;">'+
                  '<div class="bar" ng-repeat="item in datasource" style="height:{{item.val*3}}px; margin-top:{{300-item.val*3}}px;">'+
                        '{{item.val}}%'+
                  '</div>'+
            '</div>'          
         }          
      });


    </script>
  </head>
  
  
  <body ng-controller="appCtrl">    
	    <qchart datasource="items"> </qchart> 
	    <qtable datasource="items"> </qtable> 
  </body>
   
</html>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 31.05.2013 в 08:23.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск