Angular单页应用程序不解释html标签答案

【问题标题】：Angular single page application not interpreting html tagsAngular单页应用程序不解释html标签
【发布时间】：2013-09-16 11:18:20
【问题描述】：

我希望能够使用 AngularJS 在我的 html 中加载部分视图。

我遇到的问题是，当我做这样的事情时：

mySite.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/:slug', { templateUrl: '/Include', controller: 'RouteController' })
        .otherwise({ redirectTo: '/index' });
}]);

mySite.controller('AppCtrl', ['$scope', '$rootScope', '$http', function ($scope, $rootScope, $http) {
    $http.get('/Index').success(function (data) {
        $rootScope.pages = data;
    });

    $scope.$on('routeLoaded', function (event, args) {
        $scope.slug = args.slug;
    });
}]);

mySite.controller('RouteController', ['$scope', '$rootScope', '$routeParams', function ($scope, $rootScope, $routeParams) {
    var slug = $routeParams.slug;

    $scope.$emit('routeLoaded', { slug: slug });
    $scope.page = $rootScope.pages;
}]);

我已将其插入到我的“主视图”中

<div data-ng-view></div>

而局部视图就这么简单：

<div>{{page}}</div>

我收到 HTML 代码，该 HTML 代码未经解释就显示出来。

编辑：这是我得到的截图

【问题讨论】：

这可能是因为异步http请求。所以$scope.page = $rootScope.pages; 在$rootScope.pages = data; 之前被执行。
你是对的，但实际上这不是问题所在。事实上，有时，我什么也得不到，有时，我得到的 html 没有被解释
您的意思是page 变量包含HTML 标记并且它们显示为标记（例如<b>xxx</b> 而不是xxx）？
@NikosParaskevopoulos 是的
那你可能想看看ng-bind-html-unsafe。

标签： angularjs single-page-application

【解决方案1】：

出于安全原因，{{...}} 不允许使用 HTML 内容。你可以改用ng-include 来做我认为你想做的事：

<div data-ng-view>
    <div ng-include="url.to.page.with.content"></div>
</div>

其中url.to.page.with.content 是一个变量，包含例如"/Index"，您的 HTML 模板的路径。

【讨论】：

我的目标是创建一个单页应用程序。 ng-view 的内部必须经常改变

【解决方案2】：

在 Angular 版本 1.0.7 中显示 HTML 内容：

<div ng-bind-html-unsafe="page"></div>

注意：在最近的版本中，ng-bind-html-unsafe 不再起作用，您需要将 ngSanitize 作为应用模块的依赖项注入。

【讨论】：