JSFiddle - React, Tailwind, and code Playground

by sunnycpp

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<div class="container-fluid" ng-controller="myController">
    <button class="btn btn-primary" ng-click="buttonClicked()">{{getActionText()}}</button>
    <div class="hero-unit" mo-show="isVisible">
        <h1>AngularJS</h1>
        <p> 
          Dispatches an event name upwards through the scope hierarchy notifying the registered ng.$rootScope.
          Scope#$on listeners.
      </p>
    </div>
</div>

JavaScript

"use strict";
    var angModule = angular.module('myApp', []);

  	angModule.controller('myController', function($scope) {
        $scope.isVisible = true;
        $scope.getActionText = function() {
            if($scope.isVisible)
                return "Hide";
            else
                return "Show";
        }
        $scope.buttonClicked = function() {
            $scope.isVisible = !$scope.isVisible;
        }
    });

    angModule.directive('moShow',function() {
        return {
            link: function (scope, element, attributes) {
                console.log("in link function");
                if( attributes.hasOwnProperty("moShow") ) {
                    scope.$watch(attributes.moShow, function(newValue, oldValue) {
                        if(newValue == oldValue) {
                            if(newValue)
                                element.show();
                            else
                                element.hide();
                        } else {
                            if( !!newValue === !!oldValue) {
                                return;
                            }
                            element.stop(true, false);
                            if(newValue) {
                                console.log("Show");
                                element.show("slow");
                            } else {                                
                                console.log("hide");
                                element.hide("slow");
                            }
                        }

                    });
                }
            }
        }
    });