在angular.js中綁定Ajax頁面

Question

我嘗試使用angular.js 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')">개미생톡</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>

您可以看到，我聲明了ng-bind-html="content"並且在選擇菜單后，它將被替換。

所以我codeded app.js這樣。 每個菜單的html代碼都通過http ajax調用存儲了tabViews[tabName] 。 當選擇了菜單，則mainMenu.content存儲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;
    }
});
})();

但是，發生了錯誤angular.js:13920Error: [$sce:unsafe] http://errors.angularjs.org/1.5.8/$sce/unsafe 。

如何顯示html頁面？

更新 ：

我已經在ajax調用， response的response.data和聲明的函數中更新了代碼，但是再次發生相同的錯誤。

這是更新的html代碼<div class="combine_content" id="content-area" ng-bind-html="makeTrusted(content)"></div>

這是我的app.js代碼

$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) {
    });

Answer 1

您需要在控制器中注入$sce服務，並在其中注入URL的trustAsResourceUrl

控制者

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>