Implementing the AngularJS Custom Directives

You now need to implement the custom directive code to support the richTabs and richPane directive templates. Listing 29.7 shows the portion of rich_ui_app.js that implements the backend code necessary to support the richTabs and richPane directive templates.

The richTabs directive defines the controller function that contains the panes array used to populate the tabs. Also, the select() function sets the select value of all the panes in the array to false and then the current pane to true, which hides all the panes except the selected one. The addPane() function is called from the richPane directive and adds the pane to the panes list in richTabs. Notice that templateUrl points to the rich_tabs.html template defined above.

richPane defines a directive and specifies the rich_pane.html file as the template source. It defines the title in the scope such that it will be available to be displayed in the tabs. Notice that richTabs is required to provide access from this directive via tabsCtrl. Then in the link function, a call can be made to addPane() to add the pane to the panes array.

Listing 29.7 rich_ui_app.js-richPane/richTabs: Implementing the AngularJS directive code for pane and tabs directives

Click here to view code image

001 var app = angular.module('richApp', []);
. . .
078 app.directive('richTabs', function() {
079   return { restrict: 'E', transclude: true,
080     scope: {},
081     controller: function($scope) {
082       var panes = $scope.panes = [];
083       $scope.select = function(pane) {
084         angular.forEach(panes, function(pane) {
085           pane.selected = false;
086         });
087         pane.selected = true;
088       };
089       this.addPane = function(pane) {
090         if (panes.length == 0) {
091           $scope.select(pane);
092         }
093         panes.push(pane);
094       };
095     },
096     templateUrl: '/static/rich_tabs.html'
097   };
098 });
099 app.directive('richPane', function() {
100   return { require: '^richTabs', restrict: 'E',
101     templateUrl: '/static/rich_pane.html',
102     transclude: true, scope: { title: '@' },
103     link: function(scope, element, attrs, tabsCtrl) {
104       tabsCtrl.addPane(scope);
105     }
106   };
107 });