Question

如何在包含对象的范围变量上应用监视，并且对象具有一个具有内容可编辑div的html布局的属性。如果我输入contenteditable div，它将返回更新的布局。

这是我的范围变量，它是从指令 - ＆gt;

双向绑定的

this.scope = {
    section : '='
};

此部分的对象如下：

this.sections = [
    {
    'title' : 'Untitle Section New',
    'type'  : 'customSection',
    'layout': '<div class="content-editable" contenteditable="true" style="width: 100%;height: 100%;-webkit-column-gap: 20px;-webkit-column-count:2;-webkit-column-rule: 1px solid red;background-color: #eeeeee;outline: none; position: relative; "><p>This is test.</p></div>'
    }
]

这里是html，我在指令中重复这些部分：

<book-section data-ng-repeat="section in book.sections"
        section="section"
        data-ng-show="digitalBook.activeSection === section.index">
</book-section>

现在我想在每个部分都使用手表。如果内容可编辑div已升级，我想从dom获取更新的html。什么是以良好表现执行此操作的完美方式。

Answer 1

$scope.$watch('scope variable', function() {
    // do something here
}, true);

请参阅http://docs.angularjs.org/api/ng。$ rootScope.Scope＃$ watch

传递third argument as true以观看所有属性。是的，它有性能问题，但你的情况是深刻的。

您可以使用$watchCollection，这只会关注array或object的第一级。

scope.$watchCollection('scope variable', function (newVal, oldVal) {//do something here});

请参阅https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope＃$ watchCollection

在指令的link方法中观察范围的DOM对象

1 个答案: