Directive: controller / require

by Zaiste

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 ng-click="toggle()">
    <div>{{ state | uppercase}}</div>
    <div lightbulb class='bulb' ng-class="bulb"></div>
</div>

CSS

.bulb {
    font-size: 70px;
    width: 100px;
    height: 100px;
    border: solid 2px black;
}
.bulb.on {
    background: #f1da36;
}

JavaScript

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

app.directive('power', function () {
    return {
        restrict: 'A',
        controller: function ($scope, $element, $attrs) {
            $scope.state = 'on';

            $scope.toggle = function () {
                $scope.state = ($scope.state === 'on' ? 'off' : 'on');
            };

            this.getState = function () {
                return $scope.state;
            };
        },
        link: function (scope, element, attrs) {
            scope.$watch('state', function (newVal, oldVal) {
                if (newVal === 'off') {
                    element.addClass('disabled');
                } else {
                    element.removeClass('disabled');
                }
            });
        }
    };
});

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