Inconsistency in ng-bind and interpolate #11716
Comments
|
From my understanding, So in your example, Hope this helps a little bit |
|
I am not really sure what @mhartington means, but I don't think This merely confirms what OP already pointed out: that the behaviour of |
|
So, there is few thoughts:
|
|
@gkalpak would there be any reason for:
Honestly I'm not sure we've got this inconsistency and I can't think of any reason. |
|
@pkozlowski-opensource: There might some reasons (for the nconsistency); but I wouldn't know. Changing |
|
Right, I was thinking of eventually having |
|
This looks like a valid issue and I have to agree that @petebacondarwin WDYT? |
|
I agree that we should fix |
|
Actually I think this would be pretty straightforward. Just extract the scope.$watch(attr.ngBind, function ngBindWatchAction(value) {
element.textContent = stringify(value);
}); |
|
|
@alexey-sh: The output is not exactly the same (this is more visible in elements that preserve whitespace; such as |
|
Unsubscribe On Tue, Apr 28, 2015, 5:27 PM Georgios Kalpakas [email protected]
|
ng-bind works fine along with angular-bind-notifier, but when binding values other than primitives we are somewhat limited due to [https://github.com/angular/angular.js/issues/11716](https://github.com/angular/angular.js/issues/11716).
|
Hi please help me out, there is angular code, I want to verify h1 tag value. angular js code: {{::vm.oppDetails.managedBy.name}}{{::vm.oppDetails.managedBy.title}} Time: {{::vm.oppDetails.managedBy.officeHours}}
|
|
Hi All, I came across an alternate problem that might be related to this? Please correct me if not. While answering a question - http://stackoverflow.com/questions/34574448/filtering-some-data-with-two-kind-of-filter-in-angularjs-but-not-working/34576905, I replaced the I did take a look at I felt like this is the best place for this question. Thank you. |
|
@FrailWords - I don't believe this is a problem with Angular. See my comment on SO. |
|
@petebacondarwin thanks a lot for the correction. |
Fixes angular#11716 BREAKING CHANGE: `ngBind` now uses the same logic as $interpolate (i.e. {{myString}}) when binding, which means objects are now transformed with JSON.stringify. Before, it would use the object's toString() function. The following example shows the different output: ```js $scope.myObject = {a: 1, b: 2}; ``` ```html <span ng-bind="myObject"></span> ``` Before: ```html <span ng-bind="myObject">[object Object]</span> ``` After: ```html <span ng-bind="myObject">{"a":1,"b":2}</span> ```
Fixes angular#11716 BREAKING CHANGE: `ngBind` now uses the same logic as $interpolate (i.e. {{myString}}) when binding, which means objects are now transformed with JSON.stringify. Before, it would use the object's toString() function. The following example shows the different output: ```js $scope.myObject = {a: 1, b: 2}; ``` ```html <span ng-bind="myObject"></span> ``` Before: ```html <span ng-bind="myObject">[object Object]</span> ``` After: ```html <span ng-bind="myObject">{"a":1,"b":2}</span> ``` Migration: If you want the ouput of `toString()`, use a custom filter: ```js angular.module('myApp').filter('toString', function() { return function toString(value) { return value.toString(); }; }); ``` ```html <span ng-bind="myObject | toString">[object Object]</span> ```
Fixes angular#11716 BREAKING CHANGE: `ngBind` now uses the same logic as $interpolate (i.e. {{myString}}) when binding, which means objects are now transformed to string either with an object's custom toString() function, or if the object doesn't have one, with JSON.stringify. Previously, ngBind would use always use toString(). The following examples show the different output: ```js $scope.myPlainObject = {a: 1, b: 2}; $scope.myCustomObject = {a: 1, b: 2, toString: function() {return 'a+b';}}; ``` Plain Object: ```html <!-- Before: --> <span ng-bind="myPlainObject">[object Object]</span> <!-- After: --> <span ng-bind="myPlainObject">{"a":1,"b":2}</span> ``` Object with custom toString(): ```html <!-- Before: --> <span ng-bind="myCustomObject">[object Object]</span> <!-- After: --> <span ng-bind="myCustomObject">a+b</span> ``` Migration: If you want the output of `toString()`, use a custom filter: ```js angular.module('myApp').filter('toString', function() { return function toString(value) { return value.toString(); }; }); ``` ```html <span ng-bind="myObject | toString">[object Object]</span> ```
Fixes angular#11716 BREAKING CHANGE: `ngBind` now uses the same logic as $interpolate (i.e. {{myString}}) when binding, which means objects are now transformed to string either with an object's custom toString() function, or if the object doesn't have one, with JSON.stringify. Previously, ngBind would use always use toString(). The following examples show the different output: ```js $scope.myPlainObject = {a: 1, b: 2}; $scope.myCustomObject = {a: 1, b: 2, toString: function() {return 'a+b';}}; ``` Plain Object: ```html <!-- Before: --> <span ng-bind="myPlainObject">[object Object]</span> <!-- After: --> <span ng-bind="myPlainObject">{"a":1,"b":2}</span> ``` Object with custom toString(): ```html <!-- Before: --> <span ng-bind="myCustomObject">[object Object]</span> <!-- After: --> <span ng-bind="myCustomObject">a+b</span> ``` Migration: If you want the output of `toString()`, use a custom filter: ```js angular.module('myApp').filter('toString', function() { return function toString(value) { return value.toString(); }; }); ``` ```html <span ng-bind="myObject | toString">[object Object]</span> ```
Fixes angular#11716 BREAKING CHANGE: `ngBind` now uses the same logic as $interpolate (i.e. {{myString}}) when binding, which means objects are now transformed to string with an object's custom toString() function, except if the objects is a Date, Array, or Number, or if the object doesn't have a custom toString(), JSON.stringify. Previously, ngBind would use always use toString(). The following examples show the different output: ```js $scope.myPlainObject = {a: 1, b: 2}; $scope.myCustomObject = {a: 1, b: 2, toString: function() {return 'a+b';}}; ``` Plain Object: ```html <!-- Before: --> <span ng-bind="myPlainObject">[object Object]</span> <!-- After: --> <span ng-bind="myPlainObject">{"a":1,"b":2}</span> ``` Object with custom toString(): ```html <!-- Before: --> <span ng-bind="myCustomObject">[object Object]</span> <!-- After: --> <span ng-bind="myCustomObject">a+b</span> ``` Migration: If you want the output of `toString()`, use a custom filter: ```js angular.module('myApp').filter('toString', function() { return function toString(value) { return value.toString(); }; }); ``` ```html <span ng-bind="myObject | toString">[object Object]</span> ```
Fixes angular#11716 BREAKING CHANGE: `ngBind` now uses the same logic as $interpolate (i.e. {{myString}}) when binding, which means objects are now transformed to string with an object's custom toString() function, except if the objects is a Date, Array, or Number, or if the object doesn't have a custom toString(), JSON.stringify. Previously, ngBind would use always use toString(). The following examples show the different output: ```js $scope.myPlainObject = {a: 1, b: 2}; $scope.myCustomObject = {a: 1, b: 2, toString: function() {return 'a+b';}}; ``` Plain Object: ```html <!-- Before: --> <span ng-bind="myPlainObject">[object Object]</span> <!-- After: --> <span ng-bind="myPlainObject">{"a":1,"b":2}</span> ``` Object with custom toString(): ```html <!-- Before: --> <span ng-bind="myCustomObject">[object Object]</span> <!-- After: --> <span ng-bind="myCustomObject">a+b</span> ``` Migration: If you want the output of `toString()`, use a custom filter: ```js angular.module('myApp').filter('toString', function() { return function toString(value) { return value.toString(); }; }); ``` ```html <span ng-bind="myObject | toString">[object Object]</span> ```
Fixes angular#11716 BREAKING CHANGE: `ngBind` now uses the same logic as $interpolate (i.e. {{myString}}) when binding, which means objects are now transformed to string with an object's custom toString() function, except if the objects is a Date, Array, or Number, or if the object doesn't have a custom toString(), JSON.stringify. Previously, ngBind would use always use toString(). The following examples show the different output: ```js $scope.myPlainObject = {a: 1, b: 2}; $scope.myCustomObject = {a: 1, b: 2, toString: function() {return 'a+b';}}; ``` Plain Object: ```html <!-- Before: --> <span ng-bind="myPlainObject">[object Object]</span> <!-- After: --> <span ng-bind="myPlainObject">{"a":1,"b":2}</span> ``` Object with custom toString(): ```html <!-- Before: --> <span ng-bind="myCustomObject">[object Object]</span> <!-- After: --> <span ng-bind="myCustomObject">a+b</span> ``` Migration: If you want the output of `toString()`, use a custom filter: ```js angular.module('myApp').filter('toString', function() { return function toString(value) { return value.toString(); }; }); ``` ```html <span ng-bind="myObject | toString">[object Object]</span> ```
Fixes angular#11716 BREAKING CHANGE: `ngBind` now uses the same logic as $interpolate (i.e. {{myString}}) when binding, which means objects are now transformed to string with an object's custom toString() function, except if the objects is a Date, Array, or Number, or if the object doesn't have a custom toString(), JSON.stringify. Previously, ngBind would use always use toString(). The following examples show the different output: ```js $scope.myPlainObject = {a: 1, b: 2}; $scope.myCustomObject = {a: 1, b: 2, toString: function() {return 'a+b';}}; ``` Plain Object: ```html <!-- Before: --> <span ng-bind="myPlainObject">[object Object]</span> <!-- After: --> <span ng-bind="myPlainObject">{"a":1,"b":2}</span> ``` Object with custom toString(): ```html <!-- Before: --> <span ng-bind="myCustomObject">[object Object]</span> <!-- After: --> <span ng-bind="myCustomObject">a+b</span> ``` Migration: If you want the output of `toString()`, use a custom filter: ```js angular.module('myApp').filter('toString', function() { return function toString(value) { return value.toString(); }; }); ``` ```html <span ng-bind="myObject | toString">[object Object]</span> ```
Fixes angular#11716 BREAKING CHANGE: `ngBind` now uses the same logic as $interpolate (i.e. {{myString}}) when binding, which means values other than strings are now transformed as following: - null / undefined become empty string - with an object's custom toString() function, except if the object is a Date, Array, or Number - otherwise with JSON.stringify Previously, ngBind would use always use toString(). The following examples show the different output: ```js $scope.myPlainObject = {a: 1, b: 2}; $scope.myCustomObject = {a: 1, b: 2, toString: function() {return 'a+b';}}; ``` Plain Object: ```html <!-- Before: --> <span ng-bind="myPlainObject">[object Object]</span> <!-- After: --> <span ng-bind="myPlainObject">{"a":1,"b":2}</span> ``` Object with custom toString(): ```html <!-- Before: --> <span ng-bind="myCustomObject">[object Object]</span> <!-- After: --> <span ng-bind="myCustomObject">a+b</span> ``` If you want the output of `toString()`, you can use it directly on the value in ngBind: ```html <span ng-bind="myObject.toString()">[object Object]</span> ```
Here is example:
http://plnkr.co/edit/C95zazjXx5jfDrMqIE67?p=preview
Same data gives diffrerent output in interpolate and ng-bind
I expected that
ng-bindwill render the same result that interpolate does.The text was updated successfully, but these errors were encountered: