我们如何在requirejs模块中定义angularjs指令？

Question

我不确定如何使用requirejs模块请求和定义指令.

这是包含指令指令/ 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');
            }
        };
    });

});

这是我的main.js文件的代码

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']);
});

Answer 1

你很亲密 鉴于您的'Zf2NVIApp.js'文件包含

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

比你只需要在你的指令AMD模块定义中返回值,它应该工作:

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;

});