AngularJS将布尔值传递给指令是未定义的

Posted 2023-02-19

【中文标题】AngularJS将布尔值传递给指令是未定义的

【英文标题】：AngularJS passing boolean to directive is undefined

【发布时间】：2015-12-25 20:32:50

【问题描述】：

我有一个用于添加渐变背景颜色的指令，有点像这样：

.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 类型的函数，因此我添加了一个名为 coloured-if 的属性。我希望它仅在 coloured-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>

如您所见，我在表单本身上有 colored-tile，而 colored-if 属性正在评估表单的 $invalid 状态。 如果表单无效，我希望它应用颜色。

问题是，目前，在我控制台注销 scope.colourIf 的指令中，它返回“未定义”，这很奇怪。作为测试，我在表单中添加了一个 ng-class 指令，以查看表单是否可以访问 $invalid 属性，并且我可以确认它可以。

那么，有谁知道为什么我的指令中出现“未定义”而不是“真实”？

【问题讨论】：

需要观看coloredIf ...您只需评估一次。不知道为什么你不只是为此使用ng-style，你实际上是在重新创建一个已经内置的指令

当您的链接函数运行时，表单 $invalid 属性尚未设置

【参考方案1】：

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

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