AngularJS passing boolean to directive is undefined

Question

I have a directive that is used to add a gradient background color that looks a bit like this:

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

I'm currently trying to add a function like ng-if to it , so I added the color-if attribute. I would like it to apply only color when the color-if property evaluates to true. I know that I will have to add a watch, but so far I have not succeeded. While I have it in my opinion:

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

As you can see, I have a color tile in the form itself, and the color-if property evaluates the $ form to an invalid state. If the shape is invalid, I want it to apply color.

The problem is that in my directive, where I delete the console from scope.colourIf , it returns "undefined", which is odd. As a test, I added the ng-class directive to the form to find out if the form has access to the $ property is invalid , and I can confirm this.

So, does anyone know why I get "undefined" and not "true" in my directive?

Answer 1

The link function is executed when the DOM is parsed, however the value of your colouredIf directive can be changed while using your application. Therefore, to change this variable, you need $watch :

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