Ionic 和 Angular 指令的基本问题答案

【问题标题】：Basic issue with Ionic and Angular's directiveIonic 和 Angular 指令的基本问题
【发布时间】：2016-07-31 13:50:48
【问题描述】：

我正在使用 Ionic 开发一个项目，所以我也在使用 Angular 1。我不太了解这个框架（我真的更喜欢 Google 对 Angular 2 所做的事情 :-)）。

基本上，我只想创建一个新的 HTML 元素（一个指令）并在我的 ionic 应用程序的视图中使用它。

这是我声明指令的方式：

app.directive('smLocationSheet', function() {
   return {
      restrict: 'E',
      transclude: true,
      replace: true,
      scope: {},
      templateUrl: './locationSheet.html'
   }
});

我有一个非常基本的静态 HTML 模板和一些 SCSS，但这并不重要。在我的home.html 中，我想像这样使用我的指令：

<ion-view id="homeView" style="position: static !important;" view-title="Accueil" ng-init="init()">
    <ion-content class="has-tabs">
        <div id="map" data-tap-disabled="true"></div>
        <sm-location-sheet></sm-location-sheet>
    </ion-content>
</ion-view>

我描述指令的 js 文件加载良好，但我的指令没有“渲染”。在调试过程中，我可以看到 html 标签sm-location-sheet，但没有模板。另外，它应该被我的 hmtl 文件替换。

【问题讨论】：

您确定模板已加载，网络选项卡中没有 404？指令在同一个角度模块中注册？你进入链接功能，把调试器放在那里？
对不起，我的错。确实我的模板文件没有加载。 Failed to load template: ./locationSheet.html (HTTP status: 0 )。另外，除了我的app 之外，我没有声明一个角度模块。 html文件的路径是对的

标签： javascript angularjs ionic-framework

【解决方案1】：

好吧，感谢dfsq，我找到了我的问题。未加载模板。这里有一些有用的链接来理解为什么（尤其是 ionic :)）：

Couldn't load template using templateUrl in Angularjs

AngularJS Failed to load template

【讨论】：