离子自定义指令在模拟器中不起作用答案

【问题标题】：ionic custom directive not working in emulator离子自定义指令在模拟器中不起作用
【发布时间】：2016-12-22 02:38:56
【问题描述】：

我正在 Ionic 1 中构建一个使用自定义指令的应用程序。这些在浏览器中测试时有效，但不会出现在模拟器或 iPhone 上。我已经看到这对其他人来说是个问题，但没有一个建议对我有用。对于如何在模拟器（或更重要的是，在 iphone 上）显示自定义指令有什么建议吗？

这是我尝试过的。这些都没有奏效。

将指令和控制器移动到同一个文件中
将元素指令更改为属性指令（即 <div my-directive></div> 而不是 <my-directive></my-directive>
将 CSS display: block 添加到我的元素指令中
在指令周围添加<ion-view><ion-content> 标记，无论是在指令模板内，还是在模板外部围绕父模板中的指令本身。

Link to my project on github

以下是基本的代码：

指令

angular.module('starter.directives', [])
.directive('grid', function(GridFactory){
  return {
    restrict: 'AE',
    templateUrl: '/templates/grid.html',
    link: function(scope){
      //does stuff 
    } 
  }
})
.directive('cell', function(){
  return {
    restrict: 'AE',
    templateUrl: '/templates/cell.html',
    scope: {
      marker: '=',
      isAlive: '=',
      cellClick: '&'
    }
  }
})

指令模板

网格

  <div class="row" ng-repeat="row in grid" style="height: 5vw" >
    <div class="col gc-border gc-no-padding" ng-repeat="cell in row">
      <cell is-alive=isAlive(cell.marker) marker=cell.marker neighbors = cell.neighbors cell-click=cellClick(cell)></cell>
    </div>
  </div>

单元格

父模板

<ion-view view-title="Play">
  <ion-content>
   <div class="card">
    <p>It rebuilt 2!</p>
     <grid></grid>
   </div>
  <div class="button-bar">
    <a class="button button-calm" on-tap="step()">Step</a>
    <a class="button button-calm" on-tap="play()">{{isPlaying ? "Pause" : "Play" }}</a>
    <a class="button button-calm" on-tap="clear()">Clear</a>
  </div>
  </ion-content>
</ion-view>

【问题讨论】：

能否请您在此处添加您的代码，以便我们可以具体而不是查看整个代码？？

标签： angularjs ionic-framework

【解决方案1】：

对于指令中的 templateUrl，您有以下内容：

  .directive('grid', function(GridFactory){
  return {
    restrict: 'E',
    templateUrl: '/templates/grid.html',
    link: function(scope){
      scope.grid = GridFactory.makeGrid(20,20);
      scope.alive = [];
   ...

去掉正斜杠：

templateUrl: '/templates/grid.html', 到

templateUrl: 'templates/grid.html', 和templateUrl 的其余部分。

【讨论】：