Adding an Angular directive in Ionic

ionic-v1
1

Hey there,

Really basic question, but I’m having some trouble adding a custom directive to my Ionic based app. What is the correct place and way to add a directive to an ionic app?

2

Never mind, figured it out.

3

Hello @coen_warmer. Care to share how you did this? I am struggling with this now.

Regards.
Shreerang
Spatial Unlimited

4

If you are using a single file for your app config, controllers, services, etc, you can just add a directive.

If you are using separate files for the app config, controllers, etc. you just add a “directive” file, include it in your HTML, and the directive becomes available.

Maybe see this post : http://calendee.com/angularjs-code-organization/

5

Like @Calendee said. This is how I did it:

  1. Add a new file to your /js folder, something like yourapp_directives.js
  2. Include it in your index.html
  3. Add the module to your app.js

Now your directive will be available in your views.

Example of my directives.js:

angular.module('MyApp.Directives', []);

    angular.module('MyApp.Directives').directive('browseTo', function ($ionicGesture) {
     return {
      restrict: 'A',
      link: function ($scope, $element, $attrs) {
       var handleTap = function (e) {
        var inAppBrowser = window.open(encodeURI($attrs.browseTo), '_system');
       };
       var tapGesture = $ionicGesture.on('tap', handleTap, $element);
       $scope.$on('$destroy', function () {
        // Clean up - unbind drag gesture handler
        $ionicGesture.off(tapGesture, 'tap', handleTap);
       });
      }
     }
    })
6

@Calendee, @coen_warmer thanks for your replies. I also did get round the issue.

Regards.
Shreerang
Spatial Unlimited

1 Like