Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have having some trouble with custom directives with angular and firefox.

This directive works perfectly on chrome :

.directive('card',function(){
        return{
            restrict: 'E',
            templateUrl: 'assets/partials/directives/card.html',
            scope: {
                displayUserImage: '@',
                card: '=cardModel'
            }
        };
    });

But on firefox, it will display my directive only if I don't isolate the scope, putting "scope: true" or "scope: false" :

.directive('card',function(){
        return{
            restrict: 'E',
            templateUrl: 'assets/partials/directives/card.html',
            scope: false
        };
    });

On the firefox console, it seems not to recognize the CSS properties width and height in various places of my code, including in the directive's template. I was wondering if this had anything to do with the angular issue.

Any ideas folks ?

edit: here is my template 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>

share|improve this question
    
Which css properties? And where are they set? Inline or via a class? –  hugo der hungrige Nov 11 '13 at 17:56
    
@hugoderhungrige: "height" and "width" properties, defined inline. You can see them in my code. –  PerrierCitror Nov 11 '13 at 18:12
    
Does the same happen, if you apply the styles using a class? –  hugo der hungrige Nov 11 '13 at 18:13
    
pretty simple....you have style written outside of tag, ng-show missing close quote too...sorry is actually extra > can see in syntax highlighting where style is black text only –  charlietfl Nov 11 '13 at 18:14
    
@charlietfl: that's an error of the stackoverflows syntax highlighting. –  hugo der hungrige Nov 11 '13 at 18:27

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.