将boolean传递给指令的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);
        }
    };
})

我目前正在尝试向其添加ng-if类型函数,因此我添加了一个名为colored-if的属性.我希望它只在color -if属性被评估为true 时才应用颜色.我知道我必须加一块手表,但我还没有那么远.到目前为止,我认为这有:

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

如您所见,我在表单上有彩色图块,而color-if属性正在评估表单的$ invalid状态.如果表单无效,我希望它应用颜色.

问题是,目前,在我的指令中,我在控制台中注销了scope.colourIf它返回"undefined",这是奇怪的.作为测试,我在表单中添加了一个ng-class指令,以查看表单是否可以访问$ invalid属性,我可以确认它.

那么,有没有人知道为什么我在指令中得到"未定义"而不是"真实"？

Answer 1

该link函数在解析 DOM 时执行，但是指令的值colouredIf在应用程序的使用过程中可能会发生变化。因此，您需要$watch对此变量进行更改：

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