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.
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 });