Putting it all together

We now have a full-fledged directive, and it's time to integrate it into our app. First, make sure that the new directive is properly loaded. The first line of the app.js file should look like this:

angular.module('supernav', ['ionic', 'supernav.controllers', 'supernav.directives'])

Likewise, the index.html file should contain the following import:

<script src="js/directives.js"></script>

Next, make sure that the ion-content section in index.html now looks like this:

<ion-content scroll="false">
  <map on-create="mapCreated(map)"></map>
</ion-content>

Next, since we moved the rendering logic for the map into the directive, remove it from the controller.js file, which should now look like this:

angular.module('supernav.controllers', [])
.controller('MapCtrl', function ($scope) {
  $scope.mapCreated = function (map) {
    $scope.map = map;
  };
});

Finally, we need to make some slight modifications to style.css in order to make sure that...