Angularjs – Attempted to trust a non-string value in a content requiring a string: Context: html – while inserting data

I’m trying to insert HTML content dynamically based on the ITEMS available in DB and need to save back to DB again on click of each item’s save button which was added dynamically as below.

Controller.js:

 function getItemCommentItems() {
        $http({
            method: 'GET',
            url: 'http://xxx/api/ItemComments/GetItemCommentItems',           
            params: { Area_Id: 'L4' },           
            headers: { 'Content-Type': 'application/json; charset=utf-8', 'dataType': 'json' }
        }).then(function successCallback(response) {
            //  $scope.itemDtls = [];
            $scope.itemDtls = response.data;
             displayItems($scope.itemDtls);   
        }, function errorCallback(response) { });
    }
 function displayItems(itemData)
    {
        // alert(itemData.length);  Length: 2
        for (i = 0; i <= itemData.length; i++) {
            Title = '<table><tr><td><label for="ITEM_NAME">Item:  </label>{{' & itemData[i].ITEM_NAME & '}}</td></tr ><tr><td><input type="text" id="inpPriority" value="{{ ' & itemData[i].PRIORITY & ' }}" /></td></tr> <tr> <td><input type="text" id="inpComment" value="{{ ' & itemData[i].COMMENT & '}}" /></td></tr><tr> <td><input type="button" ng-click="onSave()" value="Save {{ ' & itemData[i].ITEM_ID & '}}" /></td></tr ></table >';
           // Title = $sce.trustAsHtml(itemData[i]);  ----> Error here Attempted to trust a non-string value in a content requiring a string: Context: html
            $scope.divHtmlVar = $sce.trustAsHtml(Title);  ----> Error here Attempted to trust a non-string value in a content requiring a string: Context: html.   
        }
    }

.HTML:

<tr> <td> <div ng-bind-html="divHtml"></div> </td> </tr>

Class details:

 public string ITEM_ID { get; set; }
        public string ITEM_NAME { get; set; }
    public string COMMENT { get; set; }
        public string PRIORITY { get; set; }
        public string ITEM_ID { get; set; } 

Error msg: Error: [$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html

Can some body help me here in fixing this issue or is there a better way to do this whole way of insert and save dynamically?

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

Why are you using the ng-bind-html in the first place? It would be much better if you had your elements described in a template. Then you don’t need to use $sce at all. Something like that I suppose:

<table ng-repeat="item in itemDtls">
  <tr>
    <td>
      <label for="ITEM_NAME">Item: </label>{{item.ITEM_NAME}}
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" id="inpPriority" value="{{item.PRIORITY}}" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" id="inpComment" value="{{item.COMMENT}}" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" ng-click="onSave()" value="Save {{item.ITEM_ID}}" />
    </td>
  </tr>
</table>

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply