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. В примере определен один элемент ввода и для него задействована новая директива. В результате, все вводимые символы тут же переводятся в верхний регистр.