AngularJS – 如何模块化指令模板组合?

前端之家收集整理的这篇文章主要介绍了AngularJS – 如何模块化指令模板组合?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是情况.我有一个指令,这取决于一个templateUrl.

该指令看起来像这样:

angular.module('foo')
.directive('bar',function(){
  return {
    restrict: 'E',replace: true,templateUrl: '/foo/bar.html',controller: 'fooController',require: '^ngModel',scope: {
      onSuccess: '&'
    }
  };
});

该指令是我的一个应用程序的一部分,重要的是它是应用程序的一部分.但是,我也想在其他项目中使用相同的指令,目前我正在使用bower将存储库下拉到我的其他项目中.但是,由于templateUrl将不正确,此伪指令将会中断. Bower克隆了整个项目,模板的实际路径最好在我的另一个项目中需要:

/lib/public/foo/bar.html

其他人如何管理?

由于可维护性问题,我从来不喜欢使用模板字符串进行模板化.我非常快速地原型html,所以我选择一个grunt任务读取我的文件,并将它们处理成一个单一的 $templateCache js文件.

Grunt Angular Templates

Grunt build task to concatenate & register your AngularJS templates in
the $templateCache

// within my Gruntfile.js
grunt.initConfig({
  ngtemplates: {
    'angular-my-directives': {
      src:      'views/**/*.html',// where my view files are
      dest:     'src/templates.js' // single file of $templateCache
    }
  }
  // ...
});

生成如下所示的文件:./src/templates.js保留我的文件夹结构:

angular.module('angular-my-directives').run(['$templateCache',function($templateCache) {

  $templateCache.put('views/directives/my-download.html',"<form name=\"myDownloadForm\" ng-submit=\"submit()\" novalidate>\n" +
    "</form>"
  );

}]);

现在在我的指令中,我可以简单地使用templateUrl:’views / directives / my-download.html’,它将使用$templateCache.

最后我用grunt-contrib-concat组合我的文件,以方便加载.

结帐“Grunt concat + uglify with sourcemaps”(或者在评论中留下更好的链接),了解如何将uglify(aka min)js文件连接到单个“dist”文件中.

如果在自己的定制凉鞋包上工作

确保将级联(又名内置)文件提交到包repo,以便您的包消费者可以简单地包含my-concat-package.js或my-concat-package.min.js

原文链接:https://www.f2er.com/angularjs/142807.html

猜你在找的Angularjs相关文章