Material: md-truncate directive breaks template bindings

[deadpassive]

Actual Behavior:

• What is the issue? When a md-truncate directive is included in my template, bindings to controller properties no longer work
• What is the expected behavior? The bindings should display the appropriate values

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/anon/pen/egMaYM?editors=1011
• Details: The component with a md-truncate binding does not show the defined bindings

Angular Versions: *

• Angular Version: 1.6.1
• Angular Material Version: 1.1.3

Additional Information:

• Browser Type: Chrome
• Browser Version: 56.0.2924.87 (64-bit)
• OS: Windows 10

[ulfalfa]

Probably it's because the md-truncate directive creates no isolated scope (so it's reusing the parent scope) and it's binding the controller to $ctrl. So the existing $ctrl is overwritten.
As a workaround don't use the directive, but attach the class md-truncate.

[stakx]

The bug with md-truncate appears to have been introduced in AngularJS Material version 1.1.2. md-truncate didn't break template bindings in version 1.1.1.

Here is another CodePen showing how md-truncate breaks an ng-click binding. Two things will get it working again:

• Remove the md-truncate attribute from the component template.
• Change the CodePen settings to include Angular Material version 1.1.1 instead of 1.1.2.

[norkunas]

md-truncate was only released since v1.1.2, but yeah this is annoying

[stakx]

@norkunas: I wasn't aware of that, sorry. My above comment can then be simplified to just "the bug is already present in 1.1.2".

[KimAlexander]

+1

[beetlerom]

This is still happening in 1.1.4. Lost 1 hour figuring out why my controller was overridden, quite an annoying bug. Thx @ulfalfa for the workaround!

[stephengardner]

Open since february?
😢

[duddu]

+1
Just lost 1 hour thinking I had forgotten the basis of binding...

[SamarRizvi]

+1 Lost 5 hours due to it. Looked everywhere for where did I do wrong.

[bosman]

+1 Lost couple of hours as well.

[DRayX]

+1 Also just lost like 2 hours debugging.

[vindrek]

+1. Still stealing precious minutes to realize that it's the culprit.

[eknowles]

dirty fix is possible with $parent 😅

[xaun]

+1, I lost 5 hours picking a large component to pieces, I should just learn when something ridiculous like this is happening it's probs Angular Material 😂

[waratah]

Can we update https://material.angularjs.org/latest/demo/toolbar to use class rather than the directive please.

[Splaktar]

@waratah I'm not sure what exactly you mean. The md-truncate directive can be an element or an attribute (restrict: 'AE'). You can't apply the directive as a class. See the docs for more details.

[xaun]

@Splaktar the md-truncate directive is bugged, so there is an md-truncate class as well as a directive. @waratah was asking for the class alternative to be documented as well. See @ulfalfa comment above, though the short of it is, the directive is breaking $scope.

[Splaktar]

@xaun the directive should be working properly in 1.1.6 as it was fixed in https://github.com/angular/material/pull/10798. The directive applies and uses the class. The class is not designed to be used on its own, thus why it is not documented in that way.