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
Post a Comment