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!
3.144.31.163