The next example adds a details directive to the page and also interactivity such that when a bar is clicked, the details directive will display the appropriate data for the selected bar.
To achieve this interactivity, the bar graph directive is modified so that it produces an action that can be monitored by other parts of the AngularJS application. This action will be to set a selectedItem property on the model, which other controllers or directives can watch for changes and then take action.
The web page for this example is contained in 03_with_detail.html. The content included differs slightly, in that we will include a new implementation of our <bars-view> directive in directives/bars_with_click.js and the controller in controllers/enhanced_controller.js and a reference to a new directive representing the detail view in directives/detail.js. Take a look at the following:
<script src="app.js"></script> <script src="directives/bars_with_click.js"></script> <script src="directives/donut.js"></script> <script src="directives/detail.js"></script> <script src="controllers/enhanced_controller.js"> </script>
The declaration of the main <div> tag changes slightly to the following by adding a directive for details-view:
<div ng-app="dashboardApp" ng-controller="dashboardController">
<bars-view width="500" height="105"
style="display: table-cell; vertical-align: middle">
</bars-view>
<donut-view width="300" height="300"
style="display: table-cell"></donut-view>
<details-view data="selectedItem" width="300">
</details-view>
</div>Note that this new directive uses an attribute named data and sets its value to selectedItem. This is a special AngularJS attribute/binding that specifies that the model data for this directive will be located in the selectedItem property of the nearest scope object upward in the DOM hierarchy. In this case, it is the scope defined on the div tag, and whenever this property on the scope is changed, this directive will update its data and visualization automatically.
The details view controller expects to have access to a selectedItem property of the model to use as its data, and it will, therefore, need to set an initial value to this property. The following adds a single line to accomplish this task:
angular.module('dashboardApp')
.controller('dashboardController',
['$scope', function ($scope) {
$scope.items = [
{ Name: 'Mike', Value: 49 },
{ Name: 'Marcia', Value: 52 },
{ Name: 'Mikael', Value: 18 }
];
$scope.selectedItem = $scope.items[0];
}]); The <bars-view> directive then adds a click handler to set the value of the selected item whenever a bar is clicked, as follows:
.on('click', function (d, i) {
$timeout(function () {
parent.selectedItem = d;
};
}) This click handler performs one action: it updates the value of the selected item in the parent scope to the value of the data item underlying the clicked visual. It does not send messages to other components, nor should it. Other directives, if interested in this update, will be able to take this action by looking for changes in the model.
The details view is a fairly simple piece of code that starts with a directive declaration. Take a look at the following:
angular.module('dashboardApp')
.directive('detailsView', function () {
return {
restrict: 'E',
scope: { data: "=" },
templateUrl: 'templates/static_item.html'
};
});A difference in this declaration from our other directives is that the code does not specify a link property but a templateUrl property and an associated value. This tells AngularJS that this directive will not be implemented by a call to a JavaScript function but should use content from the templates/static_item.html file. The contents of this file are the following:
Name: {{data.Name}}
<br/>
Value: {{data.Value}}This HTML code will be injected into DOM by AngularJS. The HTML contains embedded handlebars syntax that AngularJS will notice and substitute the content of. In this case, the values of the Name and Value properties of the object specified by the data attribute of the directive will be used, where data is the bound value of selectedItem from the model, which is the currently selected bar. Whenever this property is updated, AngularJS will automatically update DOM correctly on our behalf without any additional coding.
