Naomi Naomi - 3 years ago 72
HTML Question

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

I am trying to enhance our directive. It used to be one input type='submit' class="btn" element and the directive had replace: "true". I've changed the template for this directive to the following:

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




(Showing top part of HTML). I changed replace to false and added ngClass: '@' to the directive.

In my form I set ng-class to something and I can see it set when I inspect the element using Dev. Tools. I can also see that same ng-class expression added to my button. However, it doesn't work and it's not being evaluated.

How should I properly update my directive to be able to receive the ng-class property on the parent's div in the form and pass it to my button?

Sample of using this directive in a form right now:

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




and the directive currently has the following at the top:

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

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



Answer Source

Change the "@" to "=" and change ng-class="{{something}}" to ng-class="something", and don't use ngClass as the name of the scope property.

Embedding interpolated values inside of expressions is considered bad practice per this: https://docs.angularjs.org/guide/interpolation#known-issues

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download