为AngularJS的子属性定义getter setter

Question

我有一个中等复杂的分层javascript对象，并且在对象的每个节点上都有一个或多个由简单对象数组组成的属性。通过树视图访问该对象，并使用ng-repeat将简单的对象数组显示为所选节点的文本框集合。 e.g。

var myObj = { children: { childid: { props: [{id: "prop1", val: "<div></div>"}] } } };

问题是文本框中的文本是HTML，我希望在文本写入/读取时转义/取消浏览。如果它是顶级范围对象，我可以使用范围中定义的getter / setter（ng-model-options =＆＃34; {getterSetter：true}＆＃34;）。

是唯一的替代方法是遍历整个树并在每个详细记录上使用Object.defineProperty来设置getter / setter吗？这似乎有点做作和啰嗦。

修改

我将属性绑定到文本框，因此属性需要可分配。

Answer 1

如果您使用$scope.myMethod来完成这项工作，但这项工作可以在任何$范围内运行，您只需将方法附加到$rootScope，然后就可以使用：< / p>

• 在任何控制器上通过$rootScope.myMethod()。
• 以及<div ng-bind="myMethod(myObject)">
上的任何模板

但你可以（也应该）编写一个干净的angularjs过滤器来完成这项工作。 查看the doc about filters 还有[创建自定义]过滤器（https://docs.angularjs.org/tutorial/step_09）

的官方教程

然后你可以在模板中，在整个应用程序中使用它：

<div>
    {{ myObject.myPropertie | myFilter }}
</div>

Answer 2

正确的方法肯定是使用ng-bind-html角度属性。

这使用有角度的严格上下文转义服务。

作为模板中的指令，以及控制器和工厂中的服务：

<input ng-model="userHtml">
<div ng-bind-html="userHtml"></div>

请参阅此处的文档：Strict Contextual Escaping