更新:这是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
服务,视图将正确清理并绑定概要文本。
有关正在发生的事情的任何想法?
答案 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>