0

我希望能够使用 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 代码未经解释就显示出来。

编辑：这是我得到的截图 截屏

4

2 回答 2

2

出于安全原因，{{...}}不允许 HTML 内容。您可以改用ng-include如下方式来执行我认为您想要的操作：

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

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

于 2013-09-16T11:29:43.440 回答
1

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

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

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

于 2013-09-16T11:43:41.717 回答