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

更改＆＃34; @＆＃34;到＆＃34; =＆＃34;并将ng-class="{{something}}"更改为ng-class="something"，并且不要使用ngClass作为范围属性的名称。

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

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

1 个答案: