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

Question

我希望能够使用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代码无需解释即可显示。

编辑：这是我得到的截图

Answer 1

出于安全原因，{{...}}不允许使用HTML内容。您可以按照以下方式使用ng-include来做我想要的事情：

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

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

Answer 2

以角度版本1.0.7显示HTML内容：

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

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