我们如何定义requirejs模块中的angularjs指令？ [英] How do we define a angularjs directive in a requirejs module?

问题描述

我不完全知道如何申请和使用requirejs模块定义一个指令。

这是我的code含有指令的指令文件/ locationBtn.js

 定义（['Zf2NVIApp']，功能（Zf2NVIApp）{
    使用严格的;    Zf2NVIApp.directive（'locationBtn'，函数（）{
        返回{
            模板：'＆LT; D​​IV＆GT;＆LT; / DIV＆GT;，
            限制：'E'，
            链接：功能postLink（范围，元素，ATTRS）{
                的console.log（我们现在所在的位置BTN模块）;
                element.text（'这是locationBtn指令'）;
            }
        };
    }）;}）;
 

这是code到我的main.js文件

  require.config（{
垫片：{
}，路径：{
    角：供应商/角'，
    jQuery的：供应商/ jquery.min'，
    locationBtn：指令/ locationBtn
}
}）;需要（['Zf2NVIApp'，'locationBtn']，功能（应用程序，locationBtn）{
//使用的应用程序在这里
angular.bootstrap（文件，['Zf2NVIApp']）;
}）;
 

解决方案

您正在接近。鉴于你的'Zf2NVIApp.js'文件包含

 定义（['角']，功能（角）{
  返回angular.module（'Zf2NVIApp'，[]）;
}）;
 

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

 定义（['Zf2NVIApp']，功能（Zf2NVIApp）{
  使用严格的;  Zf2NVIApp.directive（'locationBtn'，函数（）{
    返回{
      模板：'＆LT; D​​IV＆GT;＆LT; / DIV＆GT;，
      限制：'E'，
      链接：功能postLink（范围，元素，ATTRS）{
        的console.log（我们现在所在的位置BTN模块）;
        element.text（'这是locationBtn指令'）;
      }
    };
  }）;  //你需要从这个工厂函数返回的东西
  返回Zf2NVIApp;}）;
 

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

解决方案

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;

}); 

这篇关于我们如何定义requirejs模块中的angularjs指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！