javascript - 使用 grunt 在 Angular 指令中调用 js 文件

Question

在使用grunt build命令之前，我编写了一个非常有效的指令。事实上，我下面的初始化不再起作用，因为构建后库的路径不正确:

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

是否有可能有一个在应用程序和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']
        });   
       }
   }
}]);