Search code examples
javascriptangularjshtml-escape-characters

How to escape html while saving it to db?


I want to escape special characters and html while saving to database , Can i use filter to achieve that task with below code i am getting an error your module is not loaded properly, Do i need to add dependeny in app.js. New to AngularJs any help will be appreciated.

main.html

<textarea rows="2" class="form-control" id="name"
    ng-model="processDTO.processLongName"
    placeholder="Business Process Name" maxlength="1024" name="processName"
    required
    ng-bind-html="escapeHtml"
    data-tooltip-html-unsafe="<div>{{1024 - processDTO.processLongName.length}} characters left</div>"
    tooltip-trigger="{{{true: 'focus', false: 'never'}[processDTO.processLongName.length >= 0 || processDTO.processLongName.length == null ]}}"
    tooltip-placement="top" tooltip-class="bluefill">
</textarea>

filter.js

angular
  .module('riskAssessmentApp', [
    'ngSanitize'
  ])
  .filter('escapeHtml', function ($sce) {
    // Modified by Rockallite: Add $sce.trustAsHtml() to mute "Error: $sce:unsafe"
    // http://stackoverflow.com/a/32835368/2293304
    // http://stackoverflow.com/a/28537958/2293304
    // https://github.com/janl/mustache.js/blob/master/mustache.js#L82
    var entityMap = {
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        '"': '&quot;',
        "'": '&#39;',
        "/": '&#x2F;'
    };

    return function(str) {
      return $sce.trustAsHtml(String(str).replace(/[&<>"'\/]/g, function (s) {
          return entityMap[s];
      }));
    }
  });

app.js

angular.module('riskAssessmentApp', [
    'angularSpinner',
    'ngResource',
    'ui.router',
    'ngCookies',
    'bacMultiselect',
    'kendo.directives',
    'kendoMultiselectTreeview',
    'offClick',
    'myMaxlength',
    'requireControlPoint',
    'disableControlPoint',
    'disablePageElements',
    'progressStepbar',
    'ui.bootstrap',
    'orcit.ssoHandler',
    'orcit.icon',
    'orcit.multiselectTreeview',
    'orcit.loader'
    'ngSanitize'
]).config(function ($stateProvider, $httpProvider, $urlRouterProvider,$tooltipProvider) {

ERROR

[$injector:nomod] Module 'riskAssessmentApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Solution

  • You define riskAssessmentApp module twice.

    In your filter.js don't redefine it, just attach the filter to that module:

    angular.module('riskAssessmentApp')
      .filter('escapeHtml', function ($sce) {
        // Modified by Rockallite: Add $sce.trustAsHtml() to mute "Error: $sce:unsafe"
        // http://stackoverflow.com/a/32835368/2293304
        // http://stackoverflow.com/a/28537958/2293304
        // https://github.com/janl/mustache.js/blob/master/mustache.js#L82
        var entityMap = {
            "&": "&amp;",
            "<": "&lt;",
            ">": "&gt;",
            '"': '&quot;',
            "'": '&#39;',
            "/": '&#x2F;'
        };
    
        return function(str) {
          return $sce.trustAsHtml(String(str).replace(/[&<>"'\/]/g, function (s) {
              return entityMap[s];
          }));
        }
      });