HG2D - Require in AngularJS - JSFiddle

Learn how to use Require in Directives in AngularJS

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="btn btn-success" power-switch>
    {{'Switched ' + state | uppercase}}

    <div lightbulb class='bulb' ng-class="bulb"></div>
    <div lightbulb class='bulb' ng-class="bulb"></div>
    <div lightbulb class='bulb' ng-class="bulb"></div>
  </div>

CSS

.bulb{
    position: absolute !important;
    left: 40px;
    top: 100px;
    font-size: 70px;
    display:block;
    width: 100px;
    height: 100px;
    border: solid 5px #2c2c2c;
    border-bottom-color: transparent;
    border-radius: 50%;
    position: relative;
}
.bulb:after {
    display: block;
    position: absolute;
    left: 10px;
    top: 45px;
    content: "";
    width: 70px;
    height: 70px;
    border: solid 5px #2c2c2c;
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    -webkit-transform: rotate(45deg);
}
.bulb:before {
    content:'';
    display:block;
    background: -webkit-linear-gradient(left, rgba(44, 44, 44, 1) 0%,rgba(44, 44, 44, 1) 20%,rgba(44, 44, 44, 0) 20.01%,rgba(44, 44, 44, 0) 26.65%,rgba(44, 44, 44, 1) 26.66%,rgba(44, 44, 44, 1) 46.66%,rgba(44, 44, 44, 0) 46.67%,rgba(44, 44, 44, 0) 53.32%, rgba(44, 44, 44, 1) 53.33%,rgba(44, 44, 44, 1) 73.33%,rgba(44, 44, 44, 0) 73.34%,rgba(44, 44, 44, 0) 79.99%,rgba(44, 44, 44, 1) 80%,rgba(44, 44, 44, 1) 100%);
    background: -moz-linear-gradient(left, rgba(44, 44, 44, 1) 0%,rgba(44, 44, 44, 1) 20%,rgba(44, 44, 44, 0) 20.01%,rgba(44, 44, 44, 0) 26.65%,rgba(44, 44, 44, 1) 26.66%,rgba(44, 44, 44, 1) 46.66%,rgba(44, 44, 44, 0) 46.67%,rgba(44, 44, 44, 0) 53.32%, rgba(44, 44, 44, 1) 53.33%,rgba(44, 44, 44, 1) 73.33%,rgba(44, 44, 44, 0) 73.34%,rgba(44, 44, 44, 0) 79.99%,rgba(44, 44, 44, 1) 80%,rgba(44, 44, 44, 1) 100%);
    background: -o-linear-gradient(left, rgba(44, 44, 44, 1) 0%,rgba(44, 44, 44, 1) 20%,rgba(44, 44, 44, 0) 20.01%,rgba(44, 44, 44, 0) 26.65%,rgba(44, 44, 44, 1) 26.66%,rgba(44, 44, 44, 1) 46.66%,rgba(44, 44, 44, 0) 46.67%,rgba(44, 44, 44, 0) 53.32%, rgba(44, 44, 44, 1) 53.33%,rgba(44, 44, 44, 1) 73.33%,rgba(44, 44, 44, 0) 73.34%,rgba(44, 44, 44, 0) 79.99%,rgba(44, 44, 44, 1) 80%,rgba(44, 44, 44, 1) 100%);
    background: -ms-linear-gradient(left, rgba(44, 44, 44, 1) 0%,rgba(44, 44, 44, 1) 20%,rgba(44, 44, 44, 0) 20.01%,rgba(44, 44, 44,...

JavaScript

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

App.directive('powerSwitch', function() {
    return {
        restrict: 'A',
        controller: function($scope, $element, $attrs) {
            $scope.state = 'on';
            
            $scope.toggle = function() {
                $scope.$apply(function() {
                    $scope.state = ($scope.state === 'on' ? 'off' : 'on');
                });
            };
            
            this.getState = function() {
                return $scope.state;
            };
        },
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                scope.toggle();
            });
            
            scope.$watch('state', function(newVal, oldVal) {
                if (newVal === 'off') {
                    element.addClass('disabled');
                } else {
                    element.removeClass('disabled');
                }
            });
        }  
    };
});

App.directive('lightbulb', function() {
    return {
        restrict: 'A',
        require: '^powerSwitch',
        link: function(scope, element, attrs, controller) {
            scope.$watch(function() {
                scope.bulb = controller.getState();
            });
        }
    };
});