angular.element

1.$,watch 2.Directive: 1. replace 2. compile

by Varun Nath

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/css/foundation.min.css">

<div ng-app="myApp">

    <dumb-password></dumb-password>    

</div>

JavaScript

/**
* myApp Module
*
* Description
*/

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

myApp.directive('dumbPassword',function(){

	var validElement = angular.element('<div>{{model.input}}</div>');

	var link = function(scope,element){

				scope.$watch("model.input",function(value){
					if(value === 'password')
					{
						validElement.addClass('alert-box alert');

						// element.children(1).toggleClass('alert-box alert');
						// console.log(element.children(0).children(1));
					}
                    else
                    {
                        validElement.removeClass('alert-box alert');
                    }
				});
		};//end link

		return{
			restrict:'E',
			replace:true,
			template:'<div>'+
					 	'<input type ="text" ng-model="model.input">'+
					 '</div>',
			compile:function(templateElement){
                //append the element to the template
				templateElement.append(validElement);
			
			//we have to return the link from inside the compiler 
				return link;
			}	
		};

});