Why mixing interpolation and expressions is bad pr

Question

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.

Answer 1

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

Answer 2

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