我以前从未见过API这样做，但我正在处理我所拥有的。这是我正在处理的API的响应主体的一部分
"body": {
"isRichText":true,
"messageSegments":[
{
"htmlTag":"p",
"markupType":"Paragraph",
"text":"",
"type":"MarkupBegin"
},
{
"text":"This is a ",
"type":"Text"
},
{
"htmlTag":"b",
"markupType":"Bold",
"text":"",
"type":"MarkupBegin"
},
{
"text":"post",
"type":"Text"
},
{
"htmlTag":"b"
,"markupType":"Bold",
"text":"",
"type":"MarkupEnd"
},
{
"text":" from the standard ",
"type":"Text"
},
{
"htmlTag":"i",
"markupType":"Italic",
"text":"",
"type":"MarkupBegin"
},
{
"text":"chatter",
"type":"Text"
},
{
"htmlTag":"i",
"markupType":"Italic",
"text":"",
"type":"MarkupEnd"
},
{
"text":" UI with some HTML tags",
"type":"Text"
},
{
"htmlTag":"p",
"markupType":"Paragraph",
"text":"\n",
"type":"MarkupEnd"
}
]
}
我需要组合这些段中的每一个，以便创建最终成为段落标记内部元素的内容（在本例中）。
HTML
<div ng-repeat="bodyElement in post.body.messageSegments">
<!-- ng-if maybe? -->{{bodyElement.htmlTag}} {{bodyElement.text}}
</div>
完成此操作的最佳方法是什么？它是直接在js文件中，还是我应该在模板中尝试？
答案 0 :(得分：1)
我的建议是创建一个解析消息段的服务，以及一个显示结果的指令。
以下是一个工作示例：JSFiddle
<强>服务
服务$messageSegment有两种方法：parse和parseHttpResponse。后者可用于transformResponse请求的$http配置选项。
angular.module('myApp')
.factory('$messageSegment', messageSegmentFactory);
function messageSegmentFactory() {
var $messageSegment = {};
$messageSegment.parse = function(arr) {
var html = '';
if (!angular.isArray(arr) || !arr.length)
return html;
do {
var segment = arr.shift();
switch (segment.type) {
case 'Link':
html += '<a href="' + segment.url + '">' + segment.text + '</a>';
break;
case 'Mention':
html += '<a href="/users/' + segment.user.id + '">' + segment.text + '</a>';
break;
case 'Hashtag':
html += '<a class="hashtag">' + segment.text + '</a>';
break;
case 'MarkupBegin':
html += '<' + segment.htmlTag + '>';
break;
case 'MarkupEnd':
html += '</' + segment.htmlTag + '>';
break;
default:
html += segment.text;
}
} while (arr.length);
return html;
};
$messageSegment.parseHttpResponse = function(data) {
return $messageSegment.parse(data.body.messageSegments);
};
return $messageSegment;
}
<强>指令
此sfChatter指令会观察其url属性，并且每当该值发生更改时，都会发出$http请求，解析响应并自动更新自己的内部HTML。
angular.module('myApp')
.directive('sfChatter', sfChatterDirective);
sfChatterDirective.$inject = ['$http', '$messageSegment'];
function sfChatterDirective($http, $messageSegment) {
return {
restrict: 'E',
link: postLink
};
function postLink(scope, iElement, iAttrs) {
iAttrs.$observe('url', function(value) {
var url = scope.$eval(value);
$http({
url: url,
method: 'GET',
transformResponse: $messageSegment.parseHttpResponse
}).then(function(res) {
iElement.html(res.data);
});
});
}
}
<强>用法
在您的应用中，您会执行类似<sf-chatter url="myUrl">的操作，其中myUrl是一个范围变量，用于告知指令要触发的$http端点。
答案 1 :(得分：0)
这对你来说有点神奇的魔力。控制器代码（你需要注入$ sce）：
override func viewDidLoad() {
super.viewDidLoad()
print("Movement Report Called");
print("unit ID = \(unitID)")
var id : String = String(self.unitID);
print("string id = \(id)")
self.ActivityIndicator.startAnimating()
let backgroundQueue = dispatch_get_global_queue(qualityOfServiceClass, 0)
dispatch_async(backgroundQueue, {
let myURL = NSURL(string: "<URL>");
let request = NSMutableURLRequest(URL: myURL!);
request.HTTPMethod = "POST";
let task = NSURLSession.sharedSession().dataTaskWithRequest(request){
data, responce, error in
if error != nil{
print("Error = \(error)")
}
do {
if let jsonResult = try NSJSONSerialization.JSONObjectWithData(data!, options: []) as? NSDictionary {
let size = jsonResult["size"] as? Int
print("result: \(size)");
self.len = size!;
if let Users = jsonResult["movementReport"] as? [[String: AnyObject]] {
for name in Users {
//if you got null from Json ...
if let msg = name["message"] as? NSNull{
//print("got \(d)")
self.location.append("null")
}
//simple chk
if let message = name["message"] as? String
{
self.location.append(message)
}
//if you got null from Json ...
if let dt = name["dateTime"] as? NSNull{
//print("got \(d)")
self.location.append("null")
}
//simple chk
if let date = name["dateTime"] as? String
{
self.dateTime.append(date)
}
//if you got null from Json ...
if let sp = name["speed"] as? NSNull{
//print("got \(d)")
self.speed.append(0.0)
}
//simple chk
if let speed = name["speed"] as? Double
{
self.speed.append(speed)
}
//if you got null from Json ...
if let ev = name["reportText"] as? NSNull{
//print("got \(d)")
self.event.append("null")
}
//simple chk
if let event = name["reportText"] as? String
{
self.event.append(event)
}
//if you got null from Json ...
if let dev = name["route"] as? NSNull{
//print("got \(d)")
self.deviation.append("--")
}
//simple chk
if let devtion = name["route"] as? String
{
self.deviation.append(devtion)
}
}
self.ActivityIndicator.stopAnimating()
dispatch_async(dispatch_get_main_queue()) {
self.tableView?.reloadData()
}
}
}
} catch let error as NSError {
print(error.localizedDescription)
}
}
task.resume();
})
}
并在HTML中绑定：
var markup = ''
for(var i = 0; i < $scope.messageSegments.length; i++){
// console.log(markup)
if($scope.messageSegments[i].type === 'MarkupBegin'){
markup = markup + '<'+$scope.messageSegments[i].htmlTag+'>'
}
else if($scope.messageSegments[i].type === 'MarkupEnd'){
markup = markup + '</'+$scope.messageSegments[i].htmlTag+'>'
}
else{
markup = markup + $scope.messageSegments[i].text
}
}
$scope.markup = markup;
$scope.markup =
$sce.trustAsHtml(markup);
Here是一名掠夺者。