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...