What's happening is, you're trying to parse the Date with the '/Date()/' text in it. So you have to extract the numbers first, then use the filter.
Controller:
function TestCtrl($scope)
{
var contentFromJson = 'Hi! this is <b>Bold</b> and <i>Italic</i>';
var dateFromJson = '/Date(1394526738123)/';
var regexPattern = /\d+/g;
$scope.Date = dateFromJson.match(regexPattern)[0];
$scope.Content = contentFromJson;
}
As for the html. Use ng-bind-html-unsafe (angularjs 1.1.1)
<div ng-app>
<div ng-controller="TestCtrl">
Date is {{Date | date : 'MMM d, y'}}
<p ng-bind-html-unsafe="Content"></p>
</div>
</div>
jsfiddle: http://jsfiddle.net/9NBLB/
edit, here's another way:
https://stackoverflow.com/a/2316066/769083
$scope.Date = new Date(parseInt(dateFromJson.substr(6)));
EDIT
Initialize App and Controller:
var app = angular.module('MyApp', []);
app.controller('TestingCtrl', ['$scope', function ($scope) {
$scope.Content =
[
{ Date : '/Date(1394526738123)/', Message : 'Hi! <b>Bold</b>' },
{ Date : '/Date(1394526738143)/', Message : 'Hi! <i>Italic</i>' }
];
$scope.ParseDate = function (dt) {
return new Date(parseInt(dt.substr(6)));
}
}]);
Custom Directive uses $observe
to read the attribute value then uses element.html()
to write the html out:
app.directive("showHtml", function() {
return {
restrict: 'A',
scope: {showHtml: '@'},
link: function(scope, element, attrs) {
attrs.$observe('showHtml', function() {
element.html(scope.showHtml);
});
}
}
});
Html:
<div ng-app="MyApp">
<div ng-controller="TestingCtrl">
<div ng-repeat="content in Content">
Message: <span show-html="{{content.Message}}"></span> <br />
Date: {{ParseDate(content.Date) | date : 'MMM d, y'}} <br /><br />
</div>
</div>
</div>
jsfiddle: http://jsfiddle.net/fXE5d/6/