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

Question

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

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

});

这是我的 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;

});