AngularJS निर्देशों के बूलियन गुजर अपरिभाषित है

Question

मैं एक निर्देश है कि एक ढाल पृष्ठभूमि रंग है जो जोड़ने के लिए प्रयोग किया जाता है है इस तरह एक सा:

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

मैं वर्तमान में एक एनजी-अगर प्रकार जोड़ने के लिए कोशिश कर रहा हूँ इसके लिए फ़ंक्शन, इसलिए मैंने रंगीन विशेषता को जोड़ा- यदि। मैं इसे केवल रंग लागू करना चाहता हूं जब रंगीन- संपत्ति का मूल्यांकन सत्य के रूप में किया जाता है। मुझे पता है कि मुझे एक घड़ी जोड़नी होगी, लेकिन मुझे अभी तक यह नहीं मिला है। अब तक मैं मेरे विचार में यह है:

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

आप देख सकते हैं, मैं प्रपत्र पर ही रंग टाइल और रंग-अगर संपत्ति का मूल्यांकन किया जाता है प्रपत्र के $ अमान्य राज्य। यदि फॉर्म अमान्य है, तो मैं इसे रंग लागू करना चाहता हूं।

समस्या, इस समय, मेरे निर्देश में समस्या है जहां मैं scope.colourIf लॉग आउट करता हूं, यह "अपरिभाषित" लौट रहा है जो अजीब है। एक परीक्षण के रूप में, मैंने एनजी-क्लास को यह देखने के लिए निर्देश दिया कि फ़ॉर्म को $ अमान्य संपत्ति तक पहुंच है या नहीं और मैं इसकी पुष्टि कर सकता हूं।

तो, क्या किसी को पता है कि मुझे अपने निर्देश में "अपरिभाषित" क्यों नहीं है और "सच" क्यों नहीं है?

Answer 1

link कार्य निष्पादित किया जाता है जब डोम पार्स किया जाता है हालांकि आपके निर्देश के उपयोग के दौरान आपके निर्देश colouredIf का मूल्य बदल सकता है। इसलिए आप इस चर पर परिवर्तन के लिए $watch की जरूरत है: `देखने के लिए coloredIf` ... आप ही कभी यह एक बार का मूल्यांकन

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