ric*_*i90 7 javascript dom 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,但我首先需要让手表正常工作.有人能指出我做错了吗？
Ben*_*esh 31
正如我在上面的评论中所说,做你想做的事情是个坏主意.也就是说,如果你仍然想要这样做,你可以$watch通过将函数作为第一个参数传递来做任何事情.
下面的代码将检查<body>标记内的HTML 是否已更改.请注意,这是一个可怕的想法.
$scope.$watch(function () {
return document.body.innerHTML;
}, function(val) {
//TODO: write code here, slit wrists, etc. etc.
});
上述手表将随时解雇任何东西在HTML的变化.
附加信息:截至目前,在很多浏览器中,没有一种很好的方法来监视已加载的新DOM元素.最新的方法仍然是在添加新DOM元素时触发某些内容.
小智 8
正如Steinway Wu所说,MutationObserver是要走的路.这是一个片段:
.directive('myDirective', function() {
return {
...
link: function(scope, element, attrs) {
var observer = new MutationObserver(function(mutations) {
// your code here ...
});
observer.observe(element[0], {
childList: true,
subtree: true
});
}
};
});
| 归档时间： |
|
| 查看次数： |
27910 次 |
| 最近记录： |