Bulb Directive-Add click behaviour

Add click behaviour but get the on/off value from the controller in the directives scope

by gogirl

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<body ng-app="myApp" ng-init="what = 'Angularjs and Bootstrap'">
{{what}}
<hr>
<h4>Add click behaviour but get the on/off value from the controller in the directives scope</h4>
<my-d1>
    <my-d2 on-url='http://www.w3schools.com/js/pic_bulbon.gif' off-url='http://www.w3schools.com/js/pic_bulboff.gif'>
        
    </my-d2>

</my-d1>

</body>

JavaScript

//Remember: include '' in params of the DI array
    // My Main Application File
    angular.module('myApp', ['myApp.myD1', 'myApp.myD2']);

    // Directive One File
    angular.module('myApp.myD1', []).directive('myD1', function () {
        return {
            restrict: 'E',
            transclude: true,           //scope: { heading: '@', image: '@' },
            template: '<div class="container">' +
                    '<div class="row">' +
                    '<div class="span12">' +
                    '<div class="well">' +
                    '<p ng-transclude>' +
                    '</p>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>',
            replace: true
        }
    });
    // Directive Two File
    angular.module('myApp.myD2', []).directive('myD2', function () {
        return {
            restrict: 'E',
            scope: {
                onUrl: '@',
                offUrl: '@'
            },
            controller: controller,
            replace: true,
            template: '<div><a href="" ng-click="toggle()"><img ng-src="{{ value ? onUrl : offUrl }}"></div>'
        }

        function controller($scope, $element, $attrs) {
            $scope.value = false;
             $scope.toggle = toggle;

            function toggle() {
                $scope.value = !$scope.value;
            }
        }
    });