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