我不能为我的生活弄清楚如何在返回的JSON内容中使用角带弹出窗口（数据属性在JSON文件中）。
Plunkr：http://plnkr.co/edit/jVmHwIwJ0KOKCnX6QjVa?p=preview
非常感谢任何见解。谢谢一堆!!
HTML
<!-- Search -->
<div class="well">
<p>Search the term "content"</p>
<form role="form">
<div my-search ng-model="selectedContent" class="form-group clearfix search">
<input type="text" ng-model="selectedContent" ng-options="query as query.searchQuery for query in searchData" bs-typeahead="bs-typeahead" class="form-control search-field"/>
<button type="button" class="btn btn-primary search-btn" ng-click="updateModel()"><span class="glyphicon glyphicon-search"></span></button>
</div>
</form>
</div>
<!-- Dynamic Content -->
<div class="well">
<h4>{{clickedContent.contentTitle}}</h4>
<ul>
<li ng-repeat="item in clickedContent.headlines" ng-bind-html="item.headline"></li>
</ul>
</div>
JSON
[
{
"contentId": 1,
"searchQuery": "Content set 1 dummy query vestibulum abcdefghijklmnop",
"contentTitle": "Pretaining to content set 1",
"popoverTitle": "Query info",
"popoverContent": "Interesting info about query",
"headlines": [
{
"headline": "<a href='#' data-placement='bottom', data-trigger='hover' data-title='Headline details' data-content='details about headline' bs-popover>1st headline in content set 1</a>"
},
{
"headline": "<a href='#' data-placement='bottom', data-trigger='hover' data-title='Headline details' data-content='details about headline' bs-popover>2nd headline in content set 1</a>"
},
{
"headline": "<a href='#' data-placement='bottom', data-trigger='hover' data-title='Headline details' data-content='details about headline' bs-popover>3rd headline in content set 1</a>"
}
]
},
{
"contentId": 2,
"searchQuery": "Content set 2 dummy query vestibulum abcdefghijklmnop",
"contentTitle": "Pretaining to content set 2",
"popoverTitle": "Query info",
"popoverContent": "Interesting info about query",
"headlines": [
{
"headline": "<a href='#' data-placement='bottom', data-trigger='hover' data-title='Headline details' data-content='details about headline' bs-popover>1st headline in content set 2</a>"
},
{
"headline": "<a href='#' data-placement='bottom', data-trigger='hover' data-title='Headline details' data-content='details about headline' bs-popover>2nd headline in content set 2<a/>"
},
{
"headline": "<a href='#' data-placement='bottom', data-trigger='hover' data-title='Headline details' data-content='details about headline' bs-popover>3rd headline in content set 2</a>"
}
]
},
{
"contentId": 3,
"searchQuery": "Content set 3 dummy query vestibulum abcdefghijklmnop",
"contentTitle": "Pretaining to content set 3",
"popoverTitle": "Query info",
"popoverContent": "Interesting info about query",
"headlines": [
{
"headline": "<a href='#' data-placement='bottom', data-trigger='hover' data-title='Headline details' data-content='details about headline' bs-popover>1st headline in content set 3</a>"
},
{
"headline": "<a href='#' data-placement='bottom', data-trigger='hover' data-title='Headline details' data-content='details about headline' bs-popover>2nd headline in content set 3</a>"
},
{
"headline": "<a href='#' data-placement='bottom', data-trigger='hover' data-title='Headline details' data-content='details about headline' bs-popover>3rd headline in content set 3</a>"
}
]
},
{
"contentId": 4,
"searchQuery": "Content set 4 dummy query vestibulum abcdefghijklmnop",
"contentTitle": "Pretaining to content set 4",
"popoverTitle": "Query info",
"popoverContent": "Interesting info about query",
"headlines": [
{
"headline": "<a href='#' data-placement='bottom', data-trigger='hover' data-title='Headline details' data-content='details about headline' bs-popover>1st headline in content set 4</a>"
},
{
"headline": "<a href='#' data-placement='bottom', data-trigger='hover' data-title='Headline details' data-content='details about headline' bs-popover>2nd headline in content set 4</a>"
},
{
"headline": "<a href='#' data-placement='bottom', data-trigger='hover' data-title='Headline details' data-content='details about headline' bs-popover>3rd headline in content set 4</a>"
}
]
}
]
JS
var app = angular.module('demoApp', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap'])
.config(function ($typeaheadProvider) {
angular.extend($typeaheadProvider.defaults, {
template: 'ngstrapTypeahead.html',
container: 'body'
});
});
app.directive('mySearch', function(){
return {
restrict: 'A',
require: 'ngModel',
link: function($scope, $element, $attrs, ngModel){
ngModel.$render = function(){
if (angular.isObject($scope.selectedContent)) {
$scope.clickedContent = $scope.selectedContent;
}
}
$scope.updateModel = function() {
$scope.clickedContent = $scope.selectedContent;
}
}
}
})
function MainController($scope, $templateCache, $http) {
$scope.selectedContent = '';
$http.get('searchData.json').then(function(response){
$scope.searchData = response.data;
return $scope.searchData;
});
};
答案 0 :(得分：1)
我认为这就是你想要的。如果是的话，欢迎你：）
基本上我做了两件事。我不喜欢将数据发送到unsafe-html的函数，更好的方法是通过它制作过滤器和管道日期..更好，因为你可以内联而不将它们发送到函数。我在你的app.js中将这个过滤器称为“不安全”app.filter('unsafe', function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
};
});
第二个...就像上面评论中的某个人一样，只是因为你可以“渲染”它并不意味着它已被编译..所以你必须运行一个编译指令来重新处理渲染的HTML并将其转换为代码我们关心。我将该指令称为“compile-template”
app.directive('compileTemplate', function($compile, $parse){
return {
link: function(scope, element, attr){
var parsed = $parse(attr.ngBindHtml);
function getStringValue() { return (parsed(scope) || '').toString(); }
//Recompile if the template changes
scope.$watch(getStringValue, function() {
$compile(element, null, -9999)(scope); //The -9999 makes it skip directives so that we do not recompile ourselves
});
}
}
});
你会像这样写下你的“动态内容”：
<!-- Dynamic Content -->
<div class="well">
<h4>{{clickedContent.contentTitle}}</h4>
<ul>
<li ng-repeat="item in clickedContent.headlines" ng-bind-html="item.headline | unsafe" compile-template></li>
</ul>
</div>
现在您可以看到示例有效。
如果有帮助，请给予代表！感谢!!!
答案 1 :(得分：0)
您面临的问题是，为了您的客户的安全，AngularJS会自动清除ng-bind-html属性中的HTML输入。它会自动删除任何潜在的恶意属性，例如JS事件，数据前缀属性，id属性（可能是为了防止冲突......）和style。
文档显示how to bypass此自动清理。
本质上：
$scope。{/ li>中为MainController添加任意名称的方法
$templateCache.trustAsHtml(<html>)返回原始HTML。ng-bind-html属性中调用该函数，而不是检索原始HTML。不幸的是，我对AngularJS不是很有经验，并且无法在你的例子中使用它。 （我不知道如何将一个或多或少的动态变量传递给函数，我曾希望ng-bind-html=\"rawHtml(item.headline)\"已经足够好了，但事实并非如此。）