How do we define a angularjs directive in a requirejs module?

Question

How do we define a angularjs directive in a requirejs module?

I am not exactly sure how to request and define a directive using a requirejs module.

this is my code for the file containing the directive directives/locationBtn.js

    define(['Zf2NVIApp'], function (Zf2NVIApp) {
    'use strict';

    Zf2NVIApp.directive('locationBtn', function() {
        return {
            template: '<div></div>',
            restrict: 'E',
            link: function postLink(scope, element, attrs) {
                console.log("we are in the location btn module");
                element.text('this is the locationBtn directive');
            }
        };
    });

});

this is the code to my main.js file

require.config({
shim: {
},

paths: {
    angular: 'vendor/angular',
    jquery: 'vendor/jquery.min',
    locationBtn: 'directives/locationBtn'
}
});

require(['Zf2NVIApp', 'locationBtn'], function (app, locationBtn) {
// use app here
angular.bootstrap(document,['Zf2NVIApp']);
});

angularjs
requirejs

Answer 1

You're close. Given that your 'Zf2NVIApp.js' file contains

define(['angular'], function(angular){
  return angular.module('Zf2NVIApp', []);
});

than you only need to return the value in your directive AMD module definition and it should work:

define(['Zf2NVIApp'], function (Zf2NVIApp) {
  'use strict';

  Zf2NVIApp.directive('locationBtn', function() {
    return {
      template: '<div></div>',
      restrict: 'E',
      link: function postLink(scope, element, attrs) {
        console.log("we are in the location btn module");
        element.text('this is the locationBtn directive');
      }
    };
  });

  // You need to return something from this factory function
  return Zf2NVIApp;

});