На мой взгляд, у меня есть два элемента DOM, я удалил один элемент DOM из директивы, который отображается как другой элемент DOM. он отлично работает, когда съемный дом находится ниже директивы, но он не работает, когда мы обмениваем позиции обоих элементов DOM. он отображается в виде как {{data}}.
TypeError: b.setAttribute is not a function
at q.attr (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:132:20)
at Object.I.(anonymous function) [as attr] (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:133:470)
at Object.Eb.$set (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:59:328)
at Object.fn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:57:249)
at h.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:98:396)
at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:101:157)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:17:415
at Object.d [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:30:295)
at Xb.c (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:17:323)
at Xb (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js:18:30)
В чем причина?
Ниже приведен код, который работает,
<html ng-app="appPoc">
<head>
<title>Angular directive scope POC</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script>
var appPoc=angular.module('appPoc',[]).controller('MainCtrl',function($scope){
$scope.mainScopeVar="In the main controller scope";
$scope.anotherVar="New content";
});
appPoc.directive('stringDirective',function(){
return {
restrict : 'E',
replace : true,
template : '<div>{{data}}</div>',
scope : {data: "@data"},
compile : function(ele,attr){
var myele=angular.element(document.querySelector('#deleteme'));
myele.remove();
return {
pre : function(scope,ele){
console.log('in pre-link : '+scope.data);
},
post : function(scope,ele){
console.log('in post-link : '+scope.data);
}
}
}
};
});
</script>
</head>
<body ng-controller="MainCtrl">
{{mainScopeVar}}
<string:directive data="{{anotherVar}}"><div>main content </div></string:directive>
<div id="deleteme">This gets deleted next</div>
</body>
Но когда я обмениваюсь позициями элементов <string:directive>
и <div>
, как указано в приведенном ниже коде, он выдает исключение.
<html ng-app="appPoc">
<head>
<title>Angular directive scope POC</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script>
var appPoc=angular.module('appPoc',[]).controller('MainCtrl',function($scope){
$scope.mainScopeVar="In the main controller scope";
$scope.anotherVar="New content";
});
appPoc.directive('stringDirective',function(){
return {
restrict : 'E',
replace : true,
template : '<div>{{data}}</div>',
scope : {data: "@data"},
compile : function(ele,attr){
var myele=angular.element(document.querySelector('#deleteme'));
myele.remove();
return {
pre : function(scope,ele){
console.log('in pre-link : '+scope.data);
},
post : function(scope,ele){
console.log('in post-link : '+scope.data);
}
}
}
};
});
</script>
</head>
<body ng-controller="MainCtrl">
{{mainScopeVar}}
<div id="deleteme">This gets deleted next</div>
<string:directive data="{{anotherVar}}"><div>main content </div></string:directive>
</body>
Проблема в том, что вы не обрабатывали событие destroy. Поскольку метод удаления jQuery очищает данные, связанные с элементом, чтобы избежать утечек памяти. Более подробное объяснение можно найти в этой статье Бен Надела
В конечном счете, порядок операций в вашей директиве AngularJS важен из-за того, как jQuery реализует метод.remove(). Когда вы удаляете элемент из DOM с помощью.remove() или.empty(), jQuery очищает привязки событий и данные, связанные с элементом, чтобы избежать утечек памяти. Это означает, что если вы удалите элемент перед запуском события "$ destroy", к моменту выполнения обработчика события $ destroy элемент будет находиться в состоянии "sanitized".
В принципе, вам нужно добавить функцию компиляции (перед действием, которое удаляет элемент), примерно так:
scope.$on(
"$destroy",
function handleDestroyEvent() {
console.log('destroyed');
}
);
myele.remove();
myele.remove()
в функции pre link, он просто работал без необходимости вызывать событие «$ destroy» вообще. Итак, мой вопрос здесь заключается в том, что предварительная ссылка делала внутренне?