AngularJs：为指令中的输入元素应用 ng-class

Question

我正在尝试增强我们的指令。它曾经是一个输入类型='submit' class="btn" 元素并且指令已替换："true"。我已将此指令的模板更改为以下内容：

<input type="submit" value="{{value}}" id="btnChoose"
       ng-class="{{ngClass}}"
       style="width: 85% !important; margin-top: 0;"
       class="btn_file_select" ng-click="click()" />

（显示 HTML 的顶部）。我将 replace 更改为 false 并将 ngClass: '@' 添加到指令中。

在我的表单中，我将 ng-class 设置为某个值，当我使用 Dev 检查元素时，我可以看到它已设置。工具。我还可以看到相同的 ng-class 表达式添加到我的按钮。但是，它不起作用，也没有被评估。

我应该如何正确更新我的指令，以便能够在表单中的父 div 上接收 ng-class 属性并将其传递到我的按钮？

现在在表单中使用此指令的示例：

<data-desc:type ng-class="{greenText: (currentSalespoint['lRemoteS' + n] == 0 && metaData.layOuts['dlrs' + n] > 0)}"
    title="{{ '@String.Format(Labels.selectX, Labels.printer)'}}"
    do-search="popup()"
    value="{{currentSalespoint['lRemoteS'+ n] == 0 ? (metaData.layOuts['dlrs' + n]==0?'@String.Format(Labels.selectX, Labels.printer)':metaData.layOuts['dlrs' + n + 'Text']) : currentSalespoint['lRemoteS'+ n + 'Text']}}"
    param="layouts"
    filter-by="Remote Printer"
    message="@String.Format(Labels.selectX, Labels.printer)"
    selected="currentSalespoint['lRemoteS'+ n]" descrip-value="descrip" type-value="'lRemoteS'+ n"
    description="currentSalespoint['lRemoteS'+ n 

    + 'Text']"></data-desc:type>

指令当前在顶部有以下内容：

return {
            restrict: 'E',
            transclude: true,
            replace: false,

            scope: {
                title: '@',
                message: '@',
                param: '@',
                selected: '=',
                description: '=',
                value: '@',
                descrip: '=',
                type: '=',
                ngClass: '@',
                doSearch: '&',
                filterBy: '@?'
            },

Answer 1

将“@”更改为“=”并将ng-class="{{something}}"更改为ng-class="something"，并且不要使用ngClass作为作用域的名称属性。

在表达式中嵌入内插值被认为是不好的做法：https://docs.angularjs.org/guide/interpolation#known-issues

AngularJs：为指令中的输入元素应用 ng-class

AngularJs: Applying ng-class for input element in a directive

html

javascript

angularjs

angularjs-directive