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"，这将被替换为选择了菜单。

所以我像这样编码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

您需要在控制器中注入$( function() { $('.ui-spinner a').on('click', function() { $(':focus').blur(); }); }) // Updated code, I can now see the focus being lost on desktops, but still not mobile devices服务，并在那里$sce注明

<强>控制器

trustAsResourceUrl

<强> HTML

App.controller('AppController', ['$http', '$scope', '$sce',
    function($http, $scope, $sce) {
     $scope.makeTrusted= function(html_code) {
        return $sce.trustAsResourceUrl(html_code);
    }
}

在angular.js中绑定ajax页面

1 个答案: