AngularJS: Clickable links from directive

by niden

HTML

<script src="http://code.angularjs.org/1.0.0rc6/angular-1.0.0rc6.js"></script>
<div ng-app="cal">
  <script type="text/ng-template"  id="eventsView.html">
    <div
      ng-repeat="event in events"
      ng-click="onClick(event)">
          <a ng-style="getStyle(event)">{{event.name}}</a>
    </div>
  </script>
  <div ng-controller="DailyCtrl">
      Upcoming events:<events model="eventsModel"></events>
  </div>
</div>

JavaScript

var cal = angular.module("cal", []);

cal.directive("events", function() {
    return {
        restrict: 'E',
        scope: true,
        templateUrl: "eventsView.html",
        controller: EventsCtrl
    };
});

DailyCtrl = function($scope) {
    $scope.eventsModel = [
        {
        name: 'eat',
        active: true},
    {
        name: 'drink',
        active: false},
    {
        name: 'sleep',
        active: false},
    {
        name: 'play',
        active: true},
    {
        name: 'work',
        active: true},
    {
        name: 'learn',
        active: true}
    ];

    $scope.$on('eventClicked', function(event, calEvent) {
        alert(calEvent.name + ' clicked');
    });
};

EventsCtrl = function($scope, $attrs) {
    $scope.$watch($attrs.model, function(value) {
        if (value) {
            $scope.events = value;
        }
    });

    $scope.getStyle = function(calEvent) {
        var style = {
            'text-decoration': 'none'
        };
        if (calEvent.active) {
            return angular.extend({
                color: '#000'
            }, style);
        } else {
            return angular.extend({
                color: '#ccc'
            }, style);
        }
    };

    $scope.onClick = function(calEvent) {
        $scope.$emit('eventClicked', calEvent);
    };
};