如何观察DOM的变化AngularJS

一尘不染

如何观察DOM的变化AngularJS

angularjs

这似乎是一个愚蠢的问题，但是我需要知道如何监视页面的整个DOM并在页面发生任何变化时重新对其进行编译。本质上，这是AngularJS在默认情况下通过使用数据绑定来执行的操作，但是我需要在DOM中的任何内容发生变化时（不仅是绑定）发生这种情况。原因是因为我有一个完全用HTML，Javascript和PHP构建的应用程序。它是一个单页应用程序，具有一个主页，并将PHP注入该页面内的DIV包装器中。

我想对其进行一些修改，但要使我的代码与原始代码完全分开。为此，我需要能够在每次注入具有自己的DOM结构的新PHP文件时重新编译DOM。到目前为止，我似乎没有用。

app.directive("watch", function () {
    return function (scope, element, attr) {
        scope.$watch("watch", function(oldValue, newValue) {
            if(newValue) {
                console.log("there is a new value");
                console.log("the new value is " + newValue);
             }
         });
     }
});

我在<body>标签上添加了watch属性，但它似乎不起作用，当dom更改时，没有任何记录。最终，我想用$
compile替换console.log，但首先需要使手表工作。有人可以指出我做错了什么吗？

阅读 202

2020-07-04

共1个答案

一尘不染

这是一个坏主意，但我会逗你的。

因此，正如我在上面的评论中所述，做您想做的事情是一个坏主意。就是说，如果您仍然想这样做，则可以$watch通过将函数作为第一个参数传入来进行几乎任何操作。

下面的代码将检查<body>标记内的HTML 是否已更改。请注意， 这是一个可怕的想法 。

$scope.$watch(function () {
   return document.body.innerHTML;
}, function(val) {
   //TODO: write code here, slit wrists, etc. etc.
});

上面会随时火手表 ANYTHING 在HTML的变化。

当输入值发生变化时
当选择在下拉菜单中更改时
当html中任何元素的属性发生变化时。
等等

附加信息： 截至目前，在许多浏览器中，还没有真正好的方法来监视已加载的新DOM元素。最好的方法仍然是在添加新的DOM元素时触发某些操作。

2020-07-04