angularjs - Dynamic Routing and Displaying Response as HTML -
i've put quick example of application -- took me while figure out dynamic routing via ajax. return json server script controller contains html want render. no matter try, angular won't render html -- text.
index_simple.html
<html id="ng-app" ng-app="cmsapp"> <head> <script src="lib/angular/angular.js"></script> <script src="lib/angular/angular-route.js"></script> <script src="js/app_simple.js"></script> <body> <div> <ul class="nav navbar-nav"> <li><a href="#/home">home</a></li> <li><a href="#/about">about</a></li> <li><a href="#/test">test</a></li> </ul> <div id="content-view" ng-view style="border:1px solid green;padding:10px;"></div> </div> </body> </html> app_simple.js
angular.module('cmsapp', [ 'ngroute' ]) .config(['$routeprovider', function($routeprovider) { $routeprovider.when('/:name', { template: '{{returned_content | trustashtml}}', controller: 'pagescontroller' }); }]) .controller('pagescontroller', [ '$scope', '$http', '$route', '$routeparams', '$compile', function pagescontroller($scope, $http, $route, $routeparams, $compile) { var data = { page:$routeparams.name }; var json_url = '/mobile/route.cfm'; $http.post( json_url, data ).then(function (msg) { if( msg.data.content) { $scope.returned_content = msg.data.content; } }); }]) .filter('trustashtml', function($sce){ return function(input){ return $sce.trustashtml(input); } }); returned json examples links
/home
{"content":"the <strong>home page<\/strong> content"} /about
{"content":"the <strong>about page<\/strong> page content"} the problem filter not run , render response html. tried injecting filter pagescontroller , running on returned content when set $scope.returned_content doesn't work either. there different way should calling , receiving json allow me render html -- compile angular content might have embedded in html? example if response json was:
{"content":"the <strong>home page<\/strong> content -- {{extra_angular_scope_var}} "} any or ideas appreciated!
thanks...
i think forgot import below javascript file , inject module.
<script src="https://code.angularjs.org/1.3.5/angular-sanitize.js"></script> inject ngsanitize in angular module:
angular.module('cmsapp', [ 'ngroute','ngsanitize' ])
Comments
Post a Comment