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



我正在使用自定义指令的离子1中构建一个应用程序。这些在浏览器中进行测试时可以工作,但不会在模拟器或iPhone中显示。我已经看到,这对其他人来说是一个问题,但是这些建议对我来说都没有。是否有有关如何在模拟器中出现自定义指令的建议(或更重要的是在iPhone上)?

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

  1. 将指令和控制器移至同一文件
  2. 将元素指令更改为属性指令(即<div my-directive></div>而不是<my-directive></my-directive>
  3. 将CSS display: block添加到我的元素指令
  4. 在指令模板中,在指令中添加<ion-view><ion-content>标签,然后在指令本身围绕父模板中的模板外部添加标签。

链接到我在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>

对于您的指令中的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', to

templateUrl: 'templates/grid.html',templateUrl's。

的其余部分

最新更新