Question

我刚刚开始使用AngularJS。我决定使用ng-BoilerPlate作为结构。

我目前只是在创建一个小的自定义指令。

我做的是以下内容：

我在src / app / login / sso / facebook-button.html下为该指令创建了一个html文件。它只包含指令所需的常规代码。

<a href="#" class="btn btn-lg btn-block omb_btn-facebook">
    <i class="fa fa-facebook visible-xs"></i>
    <span class="hidden-xs">Facebook</span>
</a>

在同一目录中，我还创建了此指令“ssoDirective.js”所需的javascript文件。

app.directive('facebookButton', function() {
    return {
        restrict    : 'E',
        templateUrl : 'facebook-button.html'
    };
});

最后，我只是在login.tpl.html文件中使用了该模板（没有这个模板就没有问题）。

<facebook-button><facebook-button>

现在当我咕噜咕噜这个代码（只是ng-boilerPlate的普通grunt配置）时，我在Chrome中遇到以下错误：

GET http://localhost:63342/app/login/sso/facebook-button.html 404 (Not Found)angular.js:8632 
Error: [$compile:tpload] Failed to load template: /app/login/sso/facebook-button.html

我理解为什么这个错误正在产生。当我查看构建目录时，facebook-button.html文件就不存在了。使用grep我也无法在此目录中的任何位置找到此文件的内容。所以grunt在构建时清楚地跳过了这个文件。

所以问题是。如何在ng-boilerPlate中创建一个非常简单的指令。你在哪里放置.html指令，以便它包含在ng-boilerPlate的grunt构建中，以及你指定的templateUrl，以便找到它。

Answer 1

在构建过程中，ngbp中的模板将合并整合到一个文件中（实际上是两个单独的文件，templates-app.js用于应用程序模块和templates-common.js用于常见的可重用项）。此过程由Gruntfile.js中配置的html2js任务完成。

在build.config.js中，您可以指定要合并的文件。默认情况下，所有文件都匹配src/common/**/*.tpl.html模式转到templates-common.js，文件匹配src/app/**/*.tpl.html合并到templates-app.js。您也可以添加自己的规则，但也不要忘记配置Gruntfile.js！

如果您确实想使用显式模板定义（因此模板不会合并到build/templates-app或build/templates-common.js），一种解决方案是使用指令中的template属性并提供模板内联。实现相同目标的更好方法是使用$templateCache来包含模板。

请参阅documentation of $templateCache

首先，您必须按如下方式配置模块的run()部分：

app.run(function($templateCache) {
  $templateCache.put('facebook-button.html', 'Content of facebook-button.html');
});

现在，您可以使用标准templateUrl方式将facebook-button.html包含在指令中！

app.directive('facebookButton', function() {
  return {
    restrict    : 'E',
    templateUrl : 'facebook-button.html'
  };
});

如果您将功能分开并仅提及run()

，则可以获得更清晰的代码

(function(){

  'use strict'

  angular
    .module('app',[...])
    .run(Template);
    .directive('facebookButton',Directive);

  function Directive(){
    return {
      restrict    : 'E',
      templateUrl : 'facebook-button.html'
    };
  }

  function Template($templateCache) {
    $templateCache.put('facebook-button.html', 
      '...'+
      'Content of facebook-button.html'+
      '...'
    );
  }
})();

ng-boilerPlate与自定义指令

1 个答案: