JSFiddle - React, Tailwind, and code Playground

by warren guo

HTML

<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="msg" />
    <p my-dctv >
        {{msg | myUpperFilter }}
    </p>
</body>

JavaScript

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("myCtrl", function($scope) {
    $scope.msg = "grapecity team blog";
});

// add a filter
myApp.filter("myUpperFilter", function() {
    return function(input) {
        return input.toUpperCase();
    }
});

// add a directive
myApp.directive("myDctv", function() {
    return function(scope, element, attrs) {
        element.bind("mouseenter", function() {
            element.css("background", "yellow");
        });            
        element.bind("mouseleave", function() {
            element.css("background", "none");
        });            
    }
});