Geek Answers Handbook

Angular interpolation, ng-bind and ng-translation of unexpected behavior

I see unexpected behavioral differences when using Angular interpolation {{blah}} as opposed to ng-bind = 'blah' when using ng-translate. Therefore, given a really simple controller with

$scope.name = "Angular"

the following works fine using both interpolation and ng-bind ..

<div>Interpolation : Hello {{ name }}</div>
<div>ng-bind       : Hello <span ng-bind="name"/></div>

conclusion

Interpolation : Hello Angular
ng-bind : Hello Angular

Now type ng-translate , first set up a simple translation table.

$translateProvider.translations('en', {
  'WELCOME-INTERPOLATE': 'Hello {{ name }}',
  'WELCOME-BIND': 'Hello <span ng-bind="name"/>'
});

and then

<span translate translate-values="{name: name}">WELCOME-INTERPOLATE</span>
<span translate translate-values="{name: name}">WELCOME-BIND</span>

which produces

Hello Angular                     <-- This is interpolate
Hello                             <-- This is ng-bind and **fails**

and then adding "translate-compile", which, as I understand it, eliminates the need to "translate values" and gives "translate" access to its parent area, the same HTML with "translate-compile", replacing "translate-values

<span translate translate-compile>WELCOME-INTERPOLATE</span>
<span translate translate-compile>WELCOME-BIND</span>

gives the opposite result

Hello                             <-- This is interpolate and **fails**
Hello Angular                     <-- This is ng-bind

plunk,

+4

More articles:


All Articles