javascript - Binding ajax page in angular.js -


i tried coding angular.js 1.5.

<div class="container clearfix" id="mainmenu" ng-controller="mainmenucontroller mainmenu">     <ul class="menu clearfix" ng-init="tab = 'ant'">         <li class="menu1" ng-class="{menu_active:mainmenu.isselected('ant')}">             <a href="#!/anttalklist" ng-click="mainmenu.selecttab('ant')">개미생톡</a></li>         <li class="menu2" ng-class="{menu_active:mainmenu.isselected('expert')}">             <a href="#!/experttalklist" ng-click="mainmenu.selecttab('expert')">전문가생톡</a></li>         <li class="menu3" ng-class="{menu_active:mainmenu.isselected('club')}">             <a href="#!/clubtalklist" ng-click="mainmenu.selecttab('club')">둥지생톡</a></li>         <li class="menu4" ng-class="{menu_active:mainmenu.isselected('finance')}">             <a href="#!/finance" ng-click="mainmenu.selecttab('finance')">시황생톡</a></li>         <li class="menu5" ng-class="{menu_active:mainmenu.isselected('shopping')}">             <a href="#!/shopping" ng-click="mainmenu.selecttab('shopping')">생톡쇼핑</a></li>         <li class="menu6" ng-class="{menu_active:mainmenu.isselected('more')}">             <a href="#!/settings" ng-click="mainmenu.selecttab('more')">더보기</a></li>     </ul>     <div class="combine_content" id="content-area" ng-bind-html="content">     </div> </div> 

you can see, declared ng-bind-html="content" , replaced menu selected.

so codeded app.js this. each menu's html code stored tabviews[tabname] http ajax call. when menu selected, mainmenu.content stores tabviews[tabname].

(function(){     var app = angular.module('stocktalkapp', []);     app.controller('mainmenucontroller', function($scope, $http){      this.tabviews = [];     this.tab='ant';       $http({             method : "get",             url : "ant/view"         }).then(function mysucces(response) {             $scope.mainmenu.tabviews['ant'] = response;             $scope.content = $scope.mainmenu.tabviews[$scope.mainmenu.tab];         }, function myerror(response) {         });      $http({             method : "get",             url : "expert/view"         }).then(function mysucces(response) {             $scope.mainmenu.tabviews['expert'] = response;         }, function myerror(response) {         });        this.selecttab =  function(tabname){         this.tab = tabname;         this.content = this.tabviews[this.tab];     };     this.isselected = function(tabname){         return tabname === this.tab;     } }); })(); 

but, error occurred angular.js:13920error: [$sce:unsafe] http://errors.angularjs.org/1.5.8/$sce/unsafe.

how can show page in html?

updated :

i have updated code in ajax call, response response.data , declared function same error occurred again.

this updated html code <div class="combine_content" id="content-area" ng-bind-html="maketrusted(content)"></div>

and app.js code

$scope.maketrusted = function(htmlcode) {     return $sce.trustasresourceurl(htmlcode); }   $http({         method : "get",         url : "ant/view"     }).then(function mysucces(response) {         $scope.mainmenu.tabviews['ant'] = response.data;         $scope.content = $scope.mainmenu.tabviews[$scope.mainmenu.tab];     }, function myerror(response) {     });  $http({         method : "get",         url : "expert/view"     }).then(function mysucces(response) {         $scope.mainmenu.tabviews['expert'] = response.data;     }, function myerror(response) {     }); 

you need inject $sce service in controller , trustasresourceurl url there

controller

app.controller('appcontroller', ['$http', '$scope', '$sce',     function($http, $scope, $sce) {      $scope.maketrusted= function(html_code) {         return $sce.trustasresourceurl(html_code);     } } 

html

 <div class="combine_content" id="content-area" ng-bind-html="maketrusted(content)">   </div> 

Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -