0

ngSanitize dependency is not working with ngMaterial dependancy when declaring the app

I have declared the module as:

var myApp = angular.module('myApp', ['ngTable', 'ngSanitize', 'ngMaterial', 'angularjs-dropdown-multiselect']);

I don't get any error on my console but the HTML rendered is (sensitive data hidden):

enter image description here

The HTML is:

<td   data-title="'Title'" sortable="'CMPTitle'"
      ng-bind-html="item.CMPTitle"
      md-highlight-text="searchText" md-highlight-flags="i">
    <a ng-show="item.CMPId != ''" ng-click="OpenCMPItem(item.CMPId)"
       style="cursor:pointer">
        {{item.CMPTitle}}
    </a>
</td>

<td data-title="'Description'" sortable="'CMP_Submit_Description'"
    md-highlight-text="searchText"
    md-highlight-flags="i" ng-bind-html="item.CMP_Submit_Description">
  {{item.CMP_Submit_Description}}
</td>

In this the ngSanitize is not working and all the html tags are visible on the UI. ngMaterial's md-highlight-text does not seem to work as well.

But when I remove ngMaterial,

var myApp = angular.module('myApp', ['ngTable', 'ngSanitize','angularjs-dropdown-multiselect']);

I am getting properly sanitized data and links on the page.

The version used for all the files is same - 1.7.6.

The ordering of scripts in the HTML are (though I've tried a lot of re-arranging):

<script type="text/javascript" src="../SiteAssets/JS/angular.min.js"></script>
<script type="text/javascript" src="../SiteAssets/JS/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.min.js"></script>
<script type="text/javascript" src="../SiteAssets/JS/angular-material.min.js"></script>
Community
  • 1
  • 1
Mayank Srivastava
  • 13
  • 4

1 Answers1

0

you are missing this part to show html as you need

instead of

{{item.CMPTitle}}

write

<label ng-bind-html="item.CMPTitle"></label>
FarukT
  • 1,560
  • 11
  • 25
  • Done that for all the fields but when adding md-highlight-text="searchText" md-highlight-flags="i" to the label, it showing out the HTML. Though above functionality to highlight is working as expected. Both material and sanitize don't seem to work together. – Mayank Srivastava Nov 15 '19 at 14:14
  • @MayankSrivastava md-highlight-text AND md-highlight-flags wants only string variable not html containing variable as documentations says: https://material.angularjs.org/latest/api/directive/mdHighlightText - you can achieve this converting your html containing variable in your controller – FarukT Nov 15 '19 at 15:36