為AngularJS的子屬性定義一個getter設置方法

Question

我有一個中等復雜的分層javascript對象，並且在該對象的每個節點處都是一個或多個由一組簡單對象組成的屬性。 通過樹視圖訪問該對象，並使用ng-repeat將對象的簡單數組顯示為所選節點的文本框的集合。 例如

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

麻煩的是，文本框中的文本是HTML，我想在寫入/讀取文本時對其進行轉義/轉義。 如果它是頂級范圍對象，則可以使用在范圍中定義的getter / setter（ng-model-options =“ {getterSetter：true}”）。

是遍歷整棵樹並在每個明細記錄上使用Object.defineProperty來設置獲取器/設置器的唯一選擇嗎？ 這似乎有些人為和冗長。

編輯：

我將該屬性綁定到文本框，因此該屬性需要可分配。

Answer 1

如果您使用$scope.myMethod來執行此工作，但是此工作可以在任何$ scope上運行，則只需將您的方法附加到$rootScope ，它將可用：

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

但是您也可以（並且應該） 編寫一個干凈的angularjs過濾器來完成這項工作 。 請參閱有關過濾器的文檔 ，那里是[創建自定義的官方教程]過濾器（ https://docs.angularjs.org/tutorial/step_09 ）

然后，您可以在模板，整個應用程序中像這樣使用它：

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

Answer 2

正確的方法肯定是使用ng-bind-html angular屬性。

這使用了嚴格的上下文關聯轉義服務 。

作為模板中的指令，以及作為控制器和工廠中的服務：

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

請參閱此處的文檔： 嚴格的上下文轉義