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

我正试图增强我们的指令。它曾经是一个输入类型='submit'class =“btn”元素，并且该指令替换为：“true”。我已经改变了模板，该指令于以下内容：AngularJs：在指令中对输入元素应用ng-class

<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: '@?' 
      },

来源

2017-07-25 Naomi

你能告诉你的指令的代码示例？ –

我编辑了我当前的帖子以显示当前使用情况的示例。 – Naomi

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

嵌入表达式的内插的值，可以认为按本不好的做法：https://docs.angularjs.org/guide/interpolation#known-issues

来源

2017-07-25 21:06:58 adam0101

这意味着我将不得不调整所有当前使用此指令的HTML来使用这个新属性，对吧？我希望有一些方法。我会尝试它，因为我认为当前只有2页使用ng指令的这个指令 – Naomi

因此，我是否正确理解你的建议，比如dynamicClass属性。我的指令将有dynamicClass：=''，并在表单中我将复制当前ng-class到这个动态类，并在模板中的指令我会有ng-class =“dynamicClass”？ – Naomi

如果我正确理解你的问题，那么是的。您将在其模板中将表达式_through_的指令的作用域属性传递给'dynamicClass：'=''到'ng-class =“dynamicClass”'。在指令指定的元素上，您还将指定'dynamic-class =“expression”'。只要这是一个有效的表达，它应该可以工作。您不能使用'ngClass'作为范围属性，因为具有该名称的指令已经存在。 – adam0101

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

回答

相关问题