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 the map directive will render on app properly. Make sure that it looks like this:

map {
  display: block;
  width: 100%;
  height: 100%;
}

.scroll {
  height: 100%;
}

That's it! Ensure that you reload the preview in your browser if necessary. It should look just the same as it did when we were not using a directive. We have succeeded in putting all together!