Question

更新：这是link to my demo 。直接链接到我的观点/部分，问题为s here。

我在AngularJS应用程序中使用JSON提要，该应用程序包含字符串中的HTML元素，我在尝试使用$routeParams服务时绑定到View。没有$routeParams服务它可以工作，但是当我使用$routeParams服务时，它不起作用。 有谁知道为什么？

这是我的假设代码：

在概要值中包含HTML元素的JSON Feed示例：

[{
    "title": "Canada",
    "synopsis": "<p>Lorem ipsum blah blah and blah...</p>"
    ...
    ...
}]

我的脚本：

var ArticApp = angular.module('ArcticApp', ['ngRoute', 'ngSanitize']);

ArcticApp.config(function($routeProvider){
    $routeProvider
      .when('/', {
        templateUrl: './partials/map.html',
        controller: 'MainController',
      })

      .when('/videos/:itemId', {
        templateUrl: './partials/videos.html',
        controller: 'VideoController',
      })

      .otherwise({
          redirectTo: '/'
      })
});

ArcticApp.controller('MainController', function($scope){
    $scope.message = 'This is the map page';
});

ArcticApp.controller('VideoController', function($scope, $http, $routeParams){
    $http.get('./database.json').success(function(data){
      $scope.videos = data;
      $scope.whichItem = $routeParams.itemId;
    })
});

我的观点（/partials/videos.html）：

...
...
    <section ng-bind-html="{{videos[whichItem].synopsis}}"></section>
...
...

删除ng-bind-html指令将显示概要文本（包含HTML元素<p>）。但是，添加ng-bind-html指令将导致视图不显示任何文本。完全隐藏。如果我不使用$routeParams服务，视图将正确清理并绑定概要文本。

有关正在发生的事情的任何想法？

Answer 1

ng-bind-html的正确语法是表达式，而不是通过花括号{{ }}进行绑定。

所以，纠正第一个问题：

<section ng-bind-html="videos[whichItem].synopsis"></section>

您可能还需要使用$sce服务信任该html，因此将$sce注入控制器然后设置：

$scope.trustAsHtml = $sce.trustAsHtml.bind($sce);

现在您可以在绑定时使用该功能：

<section ng-bind-html="trustAsHtml(videos[whichItem].synopsis)"></section>

AngularJS：$ routeParams服务导致ng-bind-html指令不起作用 - 为什么？

1 个答案: