angularjs tanımlanmamış

Question

Ben bir degrade arka plan rengini eklemek için kullanılan bir direktif var böyle biraz: Şu anda bir ng -eğer türünü eklemek çalışıyorum

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

Bunun için renkli- ise bir öznitelik ekledim. Yalnızca renkli olduğunda özelliğinin true olarak değerlendirildiğinde rengi uygulamak istiyorum. Biliyorum, bir saat eklemem gerekecek, ama henüz bu kadarı yok. Şimdiye kadar benim görünümünde bu var:

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

Gördüğünüz gibi, ben kendi üzerindeki renkli-karo ve renkli -eğer mülkiyet değerlendirmektedir sahip formu en $ geçersiz belirtmek, bildirmek. Form geçersizse, rengi uygulamak istiyorum.

Sorun şu anda, benim yönergesinde kapsamını etkinleştirdiğimde, kapsamına giriyor ve "undefined" ifadesini döndürüyor. Bir test olarak, formun $ geçersiz özelliğine erişip erişmediğini görmek için forma bir ng sınıfı yönergesi ekledim ve bunu onaylayabiliyorum.

Bu yüzden, direktifimde neden "doğrulanmadı" ve neden "doğru" olmadığımı bilen var mı?

Answer 1

DOM ayrıştırıldığında link işlevi çalıştırılır, ancak uygulamanızın kullanımı sırasında yönergesinin colouredIf değeri değişebilir. Bu nedenle bu değişkeni değişiklikleri $watch gerekir: coloredIf` ... Eğer sadece bir kere bunu değerlendirmek `izlemek için

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