AngularJS passaggio booleano alla direttiva è indefinito

Question

ho una direttiva che viene utilizzato per l'aggiunta di una sfumatura di colore di sfondo, che è un po 'come questo:

.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); 
     } 
    }; 
}) 

Attualmente sto cercando di aggiungere un ng-se tipo funzione ad esso, quindi ho aggiunto un attributo chiamato colorato, se. Mi piacerebbe che applicasse il colore solo quando la proprietà è colorata, se la proprietà viene valutata come vera. So che dovrò aggiungere un orologio, ma non sono ancora arrivato così lontano. Finora ho questo a mio avviso:

<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> 

Come potete vedere, ho il color-tile sul modulo stesso e il colorato, se proprietà sta valutando del form $ valida stato. Se il modulo non è valido, voglio che applichi il colore.

Il problema è, al momento, nella mia direttiva in cui la console esegue il logout dello scope.colourIf restituendo "undefined" che è dispari. Come test, ho aggiunto una direttiva ng- al modulo per verificare se il modulo ha accesso alla proprietà $ non valida e posso confermarlo.

Quindi, qualcuno sa perché sto diventando "indefinito" e non "vero" nella mia direttiva?

Answer 1

La funzione link viene eseguita quando il DOM viene analizzato, tuttavia il valore della direttiva colouredIf può essere modificato durante l'utilizzo dell'applicazione. Pertanto è necessario $watch per le modifiche su questa variabile:

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