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

时间:2015-08-07 11:35:23

标签: json angularjs

更新:这是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服务,视图将正确清理并绑定概要文本。

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

1 个答案:

答案 0 :(得分:0)

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>