0

Edit: In fact, I retrieve logs from backend log server and it's json format. Some key may has special character in it. Then I try to render these logs data in UI with AngularJS.

What happends ?

  1. raw logs json data is right, such as "you & me"
  2. when use <span>{{data}}</span>, it becomes "you &amp; me" in UI, it's caused by $sce by default, $sce is enabled.
  3. changed to <span ng-bind-html="data"></span> , it shows as expected - "you & me"
  4. there's another inbox, i want to get the raw data clicked by user. I used <input type="checkbox" ... ng-checked="verify_enabled(data)" />, but in function verify_enabled, the passed parameter becomes escaped data - "you &amp; me"

In angularJs, some special characters such as "&, <, >" will be escaped when show in html. 

    "&" -> "&amp;",
    "<" -> "&lt;",
    ">" -> "&gt;",

It's AngularJs's thing caused by $sce.

For example, there's a character & in original raw data - $scope.data of controller.js.

Then in html, 

   <span>{{data}}</span> 
   //{{}} the bind will escape it from '&' to "&amp;"

I find this method by using ng-bind-html in span:

<span ng-bind-html="data"></span>
// this will output raw &

Good news - it works well and show as expected.

But for <input> element, there isn't innerhtml, the ng-bind-html cannot work. For example:

// raw data in $scope.data = "you & me";
<input  type="checkbox"   
      id="{{data}}_id"
      value="{{data}}"
      ng-checked="verify_enabled(data)"
      ng-click="toggle_enabled(data)" /> 
// the {{data}} will be escaped to "you &amp; me"

And in controller.js, the passed parameter 'data' to function verify_enabled and toggle_enabled. the value will become&amp;

Question: What I want is to get the raw unescaped character in controller.js.

Here's an example, but it doesn't work the same as i describe. Just FYI. 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-checkbox-input-directive-production</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

  
</head>
<body ng-app="checkboxExample">
  <script>
  angular.module('checkboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
     
     $scope.datas = [{msg:'hello karl'},
                     {msg:'ok fine'},
                     {msg:'you & me'},
                      {msg:'special character: < > '}];
       
     $scope.verify_filter_enabled = function (data)  {
       console.log('data is ' + data);
     };
     
     $scope.toggle_filter_enabled = function (data)  {
       console.log('data is ' + data);
     };
     
    }]);
</script>

<div ng-controller="ExampleController" >
  
 <div  ng-repeat="data in datas">
 <span ng-bind-html="data.msg"></span>
 <span>{{data.msg}}</span>

 <input  type="checkbox"   
      id="{{data.msg}}_id"
      value="{{data.msg}}"
      ng-checked="verify_filter_enabled(data.msg)"
      ng-click="toggle_filter_enabled(data.msg)" /> 

 </div>
 
 </div>
</body>
</html>
zjalex
  • 125
  • 1
  • 12
  • 1
    I've made a [plunker](http://plnkr.co/edit/iO0R6G6PNDDvpwvSsAhM?p=preview) to try to figure out what the issue is. Not sure what you want to happen. The console is showing the raw characters for me. – Razzildinho Mar 31 '15 at 10:11
  • @Razzildinho sorry, i try to reproduce my problem in code snippet. but failed. It looks like this [problem](http://stackoverflow.com/questions/25241645/angularjs-escaped-characters-in-model-assigned-to-input-value) – zjalex Mar 31 '15 at 10:21

0 Answers0