После удаления элемента из вида значение режима видимости не используется в другом элементе dom

0

На мой взгляд, у меня есть два элемента 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>

  • 1
    вы, вероятно, получите более ясную ошибку, если не используете минимизированный угол. Может быть, попробовать не минимизированный и посмотреть, имеет ли ошибка больше смысла?
Теги:
angularjs-directive

1 ответ

0

Проблема в том, что вы не обрабатывали событие destroy. Поскольку метод удаления jQuery очищает данные, связанные с элементом, чтобы избежать утечек памяти. Более подробное объяснение можно найти в этой статье Бен Надела

В конечном счете, порядок операций в вашей директиве AngularJS важен из-за того, как jQuery реализует метод.remove(). Когда вы удаляете элемент из DOM с помощью.remove() или.empty(), jQuery очищает привязки событий и данные, связанные с элементом, чтобы избежать утечек памяти. Это означает, что если вы удалите элемент перед запуском события "$ destroy", к моменту выполнения обработчика события $ destroy элемент будет находиться в состоянии "sanitized".

В принципе, вам нужно добавить функцию компиляции (перед действием, которое удаляет элемент), примерно так:

scope.$on(
  "$destroy",
  function handleDestroyEvent() {
    console.log('destroyed');
  }
);

myele.remove();
Поделиться
  • 0
    У меня есть два вопроса для ответа выше. 1. Когда вы сказали добавление кода в функцию компиляции моей директивы, вы имели в виду добавление его в функцию предварительной ссылки внутри функции компиляции? 2. Я попытался добавить код для удаления элемента myele.remove() в функции pre link, он просто работал без необходимости вызывать событие «$ destroy» вообще. Итак, мой вопрос здесь заключается в том, что предварительная ссылка делала внутренне?
  • 0
    1. Я использую функцию компиляции над вашим myele.remove ().
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню