hardik hardik - 14 days ago 6
AngularJS Question

store formatted text in mysql using cakephp and angularjs

Currently i am trying to build an community page in which user can contribute there articles in well text format. My backend is cakephp and front-end is angular-js
How can i store text in well formatted html style for example input text which i want to store in Mysql is

<b> hello </b><br/>
<em>world </em>


and when i fetch text from table output must be like

hello

world

update:-

and it should also work for inline CSS if it is possible then it is great.

<div style="color:#D2691E">hiiii</div>


i don't need to implement fancy animation-css tag but it should support basic css.

thank you in advance

Answer

You can use the ngBindHtml directive, but before you must include the $sanitize service and put ngSanitize as a dependency of your application module.

Also implemented a trusted filter with the use of $sce which is a service that provides Strict Contextual Escaping services to AngularJS.

Strict Contextual Escaping (SCE) is a mode in which AngularJS requires bindings in certain contexts to result in a value that is marked as safe to use for that context.

Code:

angular
  .module('myApp', ['ngSanitize'])
  .filter('trusted', ['$sce', function($sce) {
    return function(str) {
        return $sce.trustAsHtml(str);
    };
  }])
  .controller('myController', function($scope) {
    $scope.myHTML = '<b>hello</b><br/><em>world</em>';
    $scope.myHTMLStyled = '<div style="color: #D2691E">hiiii</div>';
  });
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-sanitize.min.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <div ng-bind-html="myHTML"></div>
  <div ng-bind-html="myHTMLStyled | trusted"></div>
</div>