Angular.js有一个方便的内置过滤器
json,它将JavaScript对象显示为格式良好的JSON.
但是,它似乎过滤掉默认以$开头的对象属性：
模板：
<pre>{{ {'name':'value','special':'yes','$reallyspecial':'Er...'} | json }}</pre>
显示：
{
"name": "value","special": "yes"
}
解决方法
基本上你不能.它被“硬编码”到过滤器的行为中.
尽管如此,构建一个自定义JSON过滤器非常容易,该过滤器的行为与Angular相同,但不会过滤掉以’$’开头的属性.
尽管如此,构建一个自定义JSON过滤器非常容易,该过滤器的行为与Angular相同,但不会过滤掉以’$’开头的属性.
(向下滚动以获取示例代码和short demo.)
如果您查看1.2.15 version source code,您会发现json过滤器的定义如下：
function jsonFilter() {
return function(object) {
return toJson(object,true);
};
}
所以,它使用toJson()函数(第二个参数(true)意味着：很好地格式化我的JSON).
所以,我们的下一站是toJson()函数,如下所示：
function toJson(obj,pretty) {
if (typeof obj === 'undefined') return undefined;
return JSON.stringify(obj,toJsonReplacer,pretty ? ' ' : null);
}
此函数使用“本机”JSON.stringify()函数,传递自定义替换函数(toJsonReplacer).
toJsonReplacer()函数处理一些特殊情况：它检查密钥是否以$开头并忽略它(如果它是这样)(它是我们想要更改的)并检查该值是Window,Document还是Scope对象(在这种情况下,它将其转换为描述性字符串,以避免“将循环结构转换为JSON”错误).
function toJsonReplacer(key,value) {
var val = value;
if (typeof key === 'string' && key.charAt(0) === '$') {
val = undefined;
} else if (isWindow(value)) {
val = '$WINDOW';
} else if (value && document === value) {
val = '$DOCUMENT';
} else if (isScope(value)) {
val = '$SCOPE';
}
return val;
}
为了完整起见,检查Window和Scope的两个函数如下所示：
function isWindow(obj) {
return obj && obj.document && obj.location && obj.alert && obj.setInterval;
}
function isScope(obj) {
return obj && obj.$evalAsync && obj.$watch;
}
最后,我们需要做的就是创建一个使用完全相同代码的自定义过滤器,唯一的区别是我们的toJsonReplacer()不会过滤掉以$开头的属性.
app.filter('customJson',function () {
function isWindow(obj) {
return obj &&
obj.document &&
obj.location &&
obj.alert &&
obj.setInterval;
}
function isScope(obj) {
return obj &&
obj.$evalAsync &&
obj.$watch;
}
function toJsonReplacer(key,value) {
var val = value;
if (isWindow(value)) {
val = '$WINDOW';
} else if (value && (document === value)) {
val = '$DOCUMENT';
} else if (isScope(value)) {
val = '$SCOPE';
}
return val;
}
function toJson(obj,pretty) {
if (typeof obj === 'undefined') { return undefined; }
return JSON.stringify(obj,pretty ? ' ' : null);
}
return function(object) {
return toJson(object,true);
};
});
另见这short demo.
*缺点是您的自定义JSON过滤器不会受益于Angular的json过滤器的进一步改进/增强,因此您必须重新定义您的自定义JSON过滤器以包含更改.当然,对于像这样的基本和简单的过滤器,人们不应该期望频繁或广泛的变化,但这并不意味着不会有任何变化.
