CODEWITHSUNDEEP
angularjs
georgeawg
georgeawg

Reputation: 48968

Why mixing interpolation and expressions is bad practice

From the Docs:

Embedding interpolation markup inside expressions

Note: AngularJS directive attributes take either expressions or interpolation markup with embedded expressions. It is considered bad practice to embed interpolation markup inside an expression:

— AngularJS Developer Guide - Interpolation

I am looking for a well written canonical answer to which I can point readers.

Upvotes: 12

Views: 775

Answers (2)

georgeawg
georgeawg

Reputation: 48968

Directives which expect Boolean values won't work:

ERRONEOUS

<input type="checkbox" ng-hide ="{{x.thenumber === null}}" />

When the expression evaluates to the Boolean value false, interpolation will return the string "false". Strings that have length greater than zero are truthy. The ng-hide directive will always hide and never show the input element.

CORRECT

 <input type="checkbox" ng-hide="x.thenumber === null" />

Upvotes: 4

Daniel
Daniel

Reputation: 11182

From the Docs:

Why mixing interpolation and expressions is bad practice:

  • It increases the complexity of the markup

  • There is no guarantee that it works for every directive, because interpolation itself is a directive. If another directive accesses attribute data before interpolation has run, it will get the raw interpolation markup and not data.

  • It impacts performance, as interpolation adds another watcher to the scope.

AngularJS Developer Guide - Interpolation

Upvotes: 7

Related Questions