JSFiddle - React, Tailwind, and code Playground

by dipaks2011

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<script>
    var app = angular.module("app", [])
    
    //a better way of creating and compiling elements
    app.directive("dumbPassword", function() {
        var validElement = angular.element("<div>{{model.input}}</div>");
        
        this.link = function(scope){
            scope.$watch("model.input", function(value){
            if(value === "password"){
                validElement.toggleClass("alert-box alert");
                }
            });
        }
    
        return {
            restrict: "E",
            replace: true, //removes the custom dumbPassword directive from DOM
            template: "<div> <input type=\"text\" ng-model=\"model.input\" /> </div>",            
            compile: function(tElem){
                tElem.append(validElement);
                
                //returning linking function from compile function
                return link;
            }
        }
    });    
    
    /*
    //creating directive and elements
    app.directive("dumbPassword", function() {
        return {
            restrict: "E",
            replace: true, //removes the custom dumbPassword directive from DOM
            template: "<div> <input type=\"text\" ng-model=\"model.input\" />        <div>{{model.input}}</div></div>",
            link: function(scope, element){
                scope.$watch("model.input", function(value){
                    if(value === "password"){
                        element.children(1).toggleClass("alert-box alert");
                    }
                });
            }
        }
    });*/
</script>

<div ng-app="app">
    <dumb-password></dumb-password>
</div>