我在使用angular和firefox的自定义指令时遇到了一些麻烦。
此指令适用于chrome:
.directive('card',function(){
return{
restrict: 'E',
templateUrl: 'assets/partials/directives/card.html',
scope: {
displayUserImage: '@',
card: '=cardModel'
}
};
});
但是在firefox上,只有在我没有隔离范围时才会显示我的指令,将“scope:true”或“scope:false”:
.directive('card',function(){
return{
restrict: 'E',
templateUrl: 'assets/partials/directives/card.html',
scope: false
};
});
在firefox控制台上,似乎没有在我的代码的各个地方识别CSS属性的宽度和高度,包括在指令的模板中。我想知道这是否与角度问题有关。
任何想法的人?
编辑:这是我的模板card.html
<div ng-mousedown="cursor = 'move'"
ng-mouseup="cursor = 'pointer'"
ng-show='card.mode===MODE_BOARD'
ng-hide="card.isArchived"
ng-mouseleave="isMouseOverCard = false" ng-mouseover="isMouseOverCard = true"
class="cursor-pointer cursor-{{cursor}} donotusedbug-animate-repeat card test_card">
<img ng-show="card._assignedUser && displayUserImage==='true'" ng-src="{{card._assignedUser.pictureUrl}}"
class="pull-right bam-user-picture img-rounded"
alt="Assigned to {{card._assignedUser.fullname}}" style="width:25px;height: 25px; margin: 0 0 0 5px ;">
<div>{{card.name}}
<span ng-show="card.description.length > 1" style="font-weight: bold; font-size: 1.3em;"
title="card notes available"> ...</span>
</div>
<div ng-init="percentageCompleteDelayed(card)" ng-show="card.todoList.length > 0" class="progress card-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{card._percentDone}}"
aria-valuemin="0" aria-valuemax="100" style="width:{{card._percentDone}}%;">
</div>
</div>
<!-- ============= column ============== -->
<div ng-show="" class="label label-default">{{getColumnById(card.columnId).name}}</div>
<!-- ============= tags ============== -->
<div>
<!--
<a ng-show="isMouseOverCard" class="pull-right" ng-href="#/board/{{currentMasterPlan.id}}/card/{{card.id}}"><span class="glyphicon glyphicon-eye-open"></span></a>
-->
<list-labels class="pull-right" labels-array='card.tags'></list-labels>
</div>
<div class="clearfix"></div>
<!-- ============= dates ============== -->
<div ng-show="card.dueDate" class='pull-right text-muted'>{{card.dueDate| date:'shortDate'}} <span class="glyphicon glyphicon-calendar"></span></div>
<div ng-show="card.startDate" class="text-muted"> <span class="glyphicon glyphicon-time"></span> {{card.startDate| date:'shortDate'}}</div>