I recently experimented with coding using angular.js version 1.5.
<div class="container clearfix" id="mainMenu" ng-controller="MainMenuController as 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')">Ant Talk</a></li>
<li class="menu2" ng-class="{menu_active:mainMenu.isSelected('expert')}">
<a href="#!/expertTalkList" ng-click="mainMenu.selectTab('expert')">Expert Talk</a></li>
<li class="menu3" ng-class="{menu_active:mainMenu.isSelected('club')}">
<a href="#!/clubTalkList" ng-click="mainMenu.selectTab('club')">Club Talk</a></li>
<li class="menu4" ng-class="{menu_active:mainMenu.isSelected('finance')}">
<a href="#!/finance" ng-click="mainMenu.selectTab('finance')">Finance Talk</a></li>
<li class="menu5" ng-class="{menu_active:mainMenu.isSelected('shopping')}">
<a href="#!/shopping" ng-click="mainMenu.selectTab('shopping')">Shopping Talk</a></li>
<li class="menu6" ng-class="{menu_active:mainMenu.isSelected('more')}">
<a href="#!/settings" ng-click="mainMenu.selectTab('more')">More</a></li>
</ul>
<div class="combine_content" id="content-area" ng-bind-html="content">
</div>
</div>
As you can see, I have used ng-bind-html="content" which will display the selected menu item's content.
To achieve this functionality, I coded my app.js like this:
Each menu's HTML code is fetched and stored in tabViews[tabName] through an HTTP AJAX call.
When a menu is selected, the content of that menu is stored in mainMenu.content as 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;
}
});
})();
However, I encountered an error message:
angular.js:13920 Error: [$sce:unsafe] http://errors.angularjs.org/1.5.8/$sce/unsafeMy question now is, how can I display the page content in HTML?
Update:
I made adjustments to my code by replacing response with response.data in the AJAX calls, but the same error persists.
Here is the updated HTML code:
<div class="combine_content" id="content-area" ng-bind-html="makeTrusted(content)"></div>And this is my revised 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) {
});