我正在使用自定义指令的离子1中构建一个应用程序。这些在浏览器中进行测试时可以工作,但不会在模拟器或iPhone中显示。我已经看到,这对其他人来说是一个问题,但是这些建议对我来说都没有。是否有有关如何在模拟器中出现自定义指令的建议(或更重要的是在iPhone上)?
这是我尝试过的。这些都没有用。
- 将指令和控制器移至同一文件
- 将元素指令更改为属性指令(即
<div my-directive></div>
而不是<my-directive></my-directive>
- 将CSS
display: block
添加到我的元素指令 - 在指令模板中,在指令中添加
<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。