AngularJS boolean ist nach Richtlinie vorbei undefined

Question

Ich habe eine Richtlinie, die für das Hinzufügen eines Gradienten Hintergrundfarbe verwendet wird, die ein bisschen wie das ist:

.directive('colouredTile', function() { 
    return { 
     restrict: 'A', 
     controller: 'ColouredTileController', 
     scope: { 
      colour: '@colouredTile', 
      colouredIf: '=' 
     }, 
     link: function (scope, element, attr, controller) { 

      console.log(scope.colouredIf); 

      // Get the CSS to apply to the element 
      var css = controller.generateCSS(scope.colour); 

      // Apply the CSS to the element 
      element.attr('style', css); 
     } 
    }; 
}) 

Ich bin derzeit versucht, ein ng-if Typ hinzufügen Funktion zu ihm, so fügte ich ein Attribut namens farbigen-wenn. Ich möchte, dass es nur die Farbe anwendet, wenn die colored-if Eigenschaft als wahr bewertet wird. Ich weiß, dass ich eine Uhr hinzufügen muss, aber ich bin noch nicht so weit. Bisher habe ich dies in meiner Sicht:

<form name="orderHeader" novalidate coloured-tile="D83030" coloured-if="orderHeader.$invalid" ng-class="{ 'test': orderHeader.$invalid }"> 
    <div class="form-group" ng-class="{ 'has-error' : !orderHeader.source.$pristine && orderHeader.source.$invalid || !orderHeader.source }"> 
     <label class="control-label">Source</label> 
     <select class="form-control" name="source" ng-disabled="controller.order.orderNumber" ng-model="controller.order.source" ng-options="source.id as source.name for source in controller.sources" required></select> 
    </div> 

    <div class="form-group" ng-class="{ 'has-error' : !orderHeader.reason.$pristine && orderHeader.reason.$invalid || !orderHeader.reason }"> 
     <label class="control-label">Reason for adding additional order</label> 
     <select class="form-control" name="reason" ng-disabled="controller.order.orderNumber" ng-model="controller.order.reason" required> 
      <option>Manual</option> 
      <option>Sample</option> 
     </select> 
    </div> 

    <div class="form-group" ng-class="{ 'has-error' : !orderHeader.accountNumber.$pristine && orderHeader.accountNumber.$invalid || !orderHeader.accountNumber }"> 
     <label class="control-label">Account number</label> 
     <input class="form-control" type="text" name="accountNumber" ng-disabled="controller.order.orderNumber" ng-model="controller.order.accountNumber" typeahead="account.accountNumber as account for account in controller.autoComplete($viewValue)" typeahead-template-url="template/typeahead/typeahead-account-match.html" autocomplete="off" /> 
    </div> 

    <div class="form-group" ng-class="{ 'has-error' : !orderHeader.referenceNumber.$pristine && orderHeader.referenceNumber.$invalid || !orderHeader.referenceNumber }"> 
     <label class="control-label">Customer reference number</label> 
     <input class="form-control" type="text" name="referenceNumber" ng-disabled="controller.order.orderNumber" ng-model="controller.order.referenceNumber" required /> 
    </div> 

    <div class="form-group"> 
     <button class="btn btn-danger" type="button" ng-click="controller.back()">Cancel</button> 
     <a class="btn btn-primary pull-right" ng-disabled="orderHeader.$invalid" ui-sref=".lines">Continue</a> 
    </div> 
</form> 

Wie Sie sehen können, hat ich den farbigen Ziegel auf dem Formular selbst und die gefärbten wenn Eigenschaft ist das des Formular Auswertung $ ungültig Zustand. Wenn das Formular ungültig ist, möchte ich, dass es die Farbe anwendet.

Das Problem ist, im Moment, in meiner Direktive, wo ich die scope.colourIf abmelden es gibt "undefined" zurück, die ungerade ist. Als Test fügte ich eine ng-Klasse Direktive zu dem Formular hinzu, um zu sehen, ob das Formular Zugriff auf die $ ungültige Eigenschaft hat, und ich kann bestätigen, dass es tut.

Also weiß jemand, warum ich "undefiniert" und nicht "wahr" in meiner Direktive bekomme?

Answer 1

Die Funktion link wird ausgeführt, wenn das DOM geparst wird, aber der Wert Ihrer Anweisung colouredIf kann sich während der Verwendung Ihrer Anwendung ändern. Daher müssen Sie $watch für Änderungen an diesen Variablen:

scope.$watch('colouredIf',function(newVal,oldVal){ 
    console.log(newVal); 
});