Персональный блог Игоря Антонова aka "spider_net"

Angular.js. Пример простейшей директивы


Рубрика: JavaScript -> Angular.JS -> Программирование
Метки: | |
Просмотров: 8461
Angular.js. Пример простейшей директивы

Согласно документации angular.js директивы должны элегантно решать одну определенную задачу. Код директивы должен быть пригоден к многократному применению и без проблем использоваться в разных приложениях. На днях я решил поэкспериментировать с написанием директив и в рамках своих опытов, написал пример простейшей директивы. Цель моего микро проекта – создать директиву, которую можно применять в элементах ввода (input) для принудительного перевода всех вводимых символов в верхний регистр.

Есть же CSS

Я знаю, что описанную задачу достаточного легко решить средствами CSS. Мне был интересен именно «angular way», поэтому я решил пойти непротоптанной дорожкой. К счастью, путь оказался достаточно коротким.

Пример рабочей директивы

В одном из своих постов, я рассказывал тебе про создание директивы-обертки для jQuery плагина. Тогда я оборачивал компонент DatePicker, входящий в состав библиотеки jQuery UI. По факту, этот пример по своей начинке отличается не сильно.

Напомню, каждая новая директива в angular.js оформляется следующим образом:

angular.module('moduleName', [])
	.directive('directiveName', function() {
	//метод-фабрика для директивы
})

Будущая тестовая директива будет использоваться с полями ввода, следовательно, в коде директивы потребуется описать связующую функцию. О том, что это такое, ты можешь узнать в [url=http://iantonov.me/page/sozdanie-direktiv-v-angularjs]одной из моих предыдущих заметокх.. Связующая функция принимает несколько параметров:

  • scope – область видимости вызова директивы;
  • element – элемент DOM, которому принадлежит директива;
  • attrs – объект, содержащий список всех атрибутов тэга в котором используется директива;
  • Полный код моей простейшей директивы привожу ниже.

    angular.module('myApp', [])
     
        .directive('myUpperCase', function() {
    	   return {
    		 require: 'ngModel',
    		 link: function(scope, element, attrs, modelCtrl) {
    			var upperCaseFunc = function(inputValue) {
    			
    				if (typeof inputValue == "undefined") {
    					return;
    				}
    				
    				var upperCasedString = inputValue.toUpperCase();
    			   
    				if(upperCasedString !== inputValue) {
    				  modelCtrl.$setViewValue(upperCasedString);
    				  modelCtrl.$render();
    				}         
    				
    				return upperCasedString;
    			 }
    			 
    			 modelCtrl.$parsers.push(upperCaseFunc);
    			 upperCaseFunc(scope[attrs.ngModel]); 
    		}
    	  };
    	})

    Посмотреть директиву в работе ты можешь ниже, через виджет jsFiddle. В примере определен один элемент ввода и для него задействована новая директива. В результате, все вводимые символы тут же переводятся в верхний регистр.

    Оставьте комментарий!
    comments powered by HyperComments