大佬教程收集整理的这篇文章主要介绍了angularjs – 如何删除由使用$compile动态添加和删除的模板创建的观察者？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
当从DOM树中删除由模板和范围表示的元素内容时,如何删除使用它创建的观察者？
这个link证明了即使当它所代表的DOM从树中移除时,观察者也会留下来.
第一次单击编译按钮将编译角度模板并将其附加到DOM树.第二次单击该按钮时,它将清空添加了上一个模板的元素并添加新编译的模板.
的index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="jquery@1.7.2" data-semver="1.7.2" src="//cdnjs.cloudFlare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script data-require="angular.js@1.2.6" data-semver="1.2.6" src="https://code.angularjs.org/1.2.6/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="smart-table-debug.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="controller">
<h1>Compile Demo</h1>
HTML to compile<br/>
<textarea id="html" ng-model="html"></textarea>
<br/>
Result<br/>
<div id="result"></div>
<br/>
<input type="button" value="compile" ng-click="compile()" />
<br/>
Compile time: {{ compileTime }}<br/>
Watchers count: {{ watchersCount }}<br/>
Digest count: {{ digestCount }} <br/>
@R_444_10586@l time taken: {{ @R_444_10586@lTime }} milliseconds <br/>
</body>
</html>
的script.js
function getAllScopes( rootScope,allScopes ) { if( !allScopes ) { allScopes = []; } allScopes.push( rootScope ); for( var scope = rootScope.$$childHead; scope; scope = scope.$$nextSibling ) { getAllScopes( scope,allScopes ); } return allScopes; } angular.module( "app",[] ) .controller( "controller",["$scope","$compile","$rootScope","$timeout",function($scope,$compile,$rootScope,$timeout ){ var e = angular.element; $scope.html = "<div>{{watchersCount}}</div>" $scope.watchersCount = 0; $scope.digestCount = 0; $scope.compileClickStart = perfoRMANce.@L_944_7@(); $scope.@R_444_10586@lTime = 0; /* because we didn't gave watch expression as 1st parameter but a functionn,* the function will be called at every end of digest cycle. * https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$digest */ $rootScope.$watch(function() { $scope.digestCount += 1; $scope.@R_444_10586@lTime = perfoRMANce.@L_944_7@() - $scope.compileClickStart; }); $scope.compile = function(){ $scope.digestCount = 0; $scope.compileClickStart = perfoRMANce.@L_944_7@(); var insertTarget = e('#result'); var targetScope = $scope.$new(); insertTarget.empty(); t0 = perfoRMANce.@L_944_7@(); var expandedContent = $compile($scope.html)(targetScopE); t1 = perfoRMANce.@L_944_7@(); $scope.compileTime = (t1 - t0) + " milliseconds."; insertTarget.append( expandedContent ); $timeout( function() { var allScopes = getAllScopes($rootScopE); var allWatchers = []; for( var i = 0; i < allScopes.length; i++ ) { var scope = allScopes[i]; if( scope.$$watchers) { //allWatchers = allWatchers.concat( scope.$$watchers ); for( var j = 0; j < scope.$$watchers.length; j++ ) { allWatchers.push({ "scope" : scope,"watcher" : scope.$$watchers[j] }); } } } console.log( allScopes ); $scope.watchersCount = allWatchers.length; }); }; }]);
为简洁起见,省略了不相关的代码.
var expandedContent; $scope.compile = function(){ // ... var insertTarget = e('#result'); var targetScope = $scope.$new(); if (expandedContent) { expandedContent.scope().$destroy(); } insertTarget.empty(); expandedContent = $compile($scope.html)(targetScopE); insertTarget.append( expandedContent ); // ... }
如果您已经在指令中使用了此功能,则在链接功能中完成后会更加清晰.侦听元素从DOM中删除并相应地清理范围.
link: function (scope,element,attrs) { element.on("$destroy",function () { scope.$destroy(); }) }
以上是大佬教程为你收集整理的angularjs – 如何删除由使用$compile动态添加和删除的模板创建的观察者？全部内容，希望文章能够帮你解决angularjs – 如何删除由使用$compile动态添加和删除的模板创建的观察者？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。