使用 grunt 在 angular 指令中调用 js 文件

Question

我写了一个指令，在使用 grunt build 命令之前效果很好。事实上，我在下面进行了这个初始化，但由于构建后库的路径不正确，所以它不再起作用了：

element.intlTelInput({
            validationScript: "bower_components/intl-tel-input/lib/libphonenumber/build/isValidNumber.js",
            preferredCountries: ['ch', 'fr']
        });

是否可以有一个在 app 和 dist（在 grunt 构建之后）上下文或类似的东西中都可以工作的相对路径？

感谢您的帮助

Answer 1

你可以尝试grunt-ng-constant，有两种配置，一种用于本地环境，另一种用于生产环境，并在构建任务中在所有过程之前添加生产ngconstant，示例：

ngconstant: {
            options: {
                dest: 'app/scripts/configuration.js',
                name: 'configuration'
            },
            local: {
                constants: {
                    'validationScript': 'bower_components/intl-tel-input/lib/libphonenumber/build/isValidNumber.js',
                }
            },
            dist:{
                constants: {
                   'validationScript': 'prodPathFile',
                }
            }
        },


grunt.registerTask('build', [
        'ngconstant:dist',
        'other_tasks'
    ]);

只需要为您的 angular 应用程序配置模块，并在您的指令中使用常量 validationScript，例如：

app.directive('yourdirective', ['validationScript', function(validationScript) {
  return {
   link: function(scope, element) {
element.intlTelInput({
            validationScript: validationScript,
            preferredCountries: ['ch', 'fr']
        });   
       }
   }
}]);

使用 grunt 在 angular 指令中调用 js 文件

Call js file in angular directive using grunt

javascript

angularjs

gruntjs

angularjs-directive