Fatal编程技术网
  • html/
  • Html 从视图中删除元素后，范围模式值不会在其他dom元素中使用

Html 从视图中删除元素后，范围模式值不会在其他dom元素中使用

html angularjs

Html 从视图中删除元素后，范围模式值不会在其他dom元素中使用,html,angularjs,angularjs-directive,Html,Angularjs,Angularjs Directive,在我看来，我有两个DOM元素，我从指令中删除了一个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.

在我看来，我有两个DOM元素，我从指令中删除了一个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)
原因可能是什么

以下是有效的代码


角度指示范围
var appPoc=angular.module（'appPoc'，[]）.controller（'MainCtrl'，function（$scope）{
$scope.mainScopeVar=“在主控制器范围内”；
$scope.anotherVar=“新内容”；
});
appPoc.directive（'stringDirective'，function（）{
返回{
限制：'E'，
替换：正确，
模板：“{data}}”，
作用域：{data:@data}，
编译：函数（ele，attr）{
var myele=angular.element（document.querySelector（'#deleteme'）；
myele.remove（）；
返回{
前置：功能（范围、ele）{
console.log（'在预链接中：'+scope.data）；
},
职位：职能（范围、要素）{
console.log（'in post link:'+scope.data）；
}
}
}
};
});
{{mainScopeVar}}
主要内容
这将在下一步被删除
但是当我交换
和
元素的位置时，就像下面代码中提到的，它抛出异常


角度指示范围
var appPoc=angular.module（'appPoc'，[]）.controller（'MainCtrl'，function（$scope）{
$scope.mainScopeVar=“在主控制器范围内”；
$scope.anotherVar=“新内容”；
});
appPoc.directive（'stringDirective'，function（）{
返回{
限制：'E'，
替换：正确，
模板：“{data}}”，
作用域：{data:@data}，
编译：函数（ele，attr）{
var myele=angular.element（document.querySelector（'#deleteme'）；
myele.remove（）；
返回{
前置：功能（范围、ele）{
console.log（'在预链接中：'+scope.data）；
},
职位：职能（范围、要素）{
console.log（'in post link:'+scope.data）；
}
}
}
};
});
{{mainScopeVar}}
这将在下一步被删除
主要内容
问题是您没有处理销毁事件。因为jQuery的remove方法会清除与元素关联的数据，以避免任何内存泄漏。 更详细的解释可以在这篇文章中找到

最后，AngularJS指令中的操作顺序很重要，因为jQuery实现.remove（）方法的方式很重要。当您使用.remove（）或.empty（）从DOM中删除元素时，jQuery将清除事件绑定和与元素关联的数据，以避免内存泄漏。这意味着，如果在触发“$destroy”事件之前删除该元素，则在执行$destroy事件处理程序时，该元素将处于“净化状态”

基本上，您需要在删除元素的操作之前添加编译函数（），如下所示：

scope.$on(
“$destroy”，
函数handleDestroyEvent（）{
console.log（“已销毁”）；
}
);

myele.remove（）如果不使用缩小角度，可能会出现更清晰的错误。也许可以试试非缩小的，看看错误是否更有意义？我有两个以上的答案。1.当您说在我的指令的compile函数中添加代码时，您的意思是将其添加到compile函数中的pre-link函数中吗？2.我尝试添加代码来删除pre-link函数中的元素
myele.remove（）
，它根本不需要触发“$destroy”事件。所以我的问题是pre-link在内部做了什么。在编译函数中，myele.remove（）的上方。预链接功能在angular engine编译代码之前发生。例如，如果您通过浏览器的开发人员工具（而不是计算机上的代码文件）查看ng repeat，您会发现它看起来不同，带有注释。这是angular的引擎执行的编译示例。因此，在angular知道您删除的元素是什么并用其他代码编译它之前，您已经删除了它。编译之后，它是angular结构的一部分，删除它会混淆angular，因为它认为它是正确的。预链接发生在代码编译之后，但在它链接到您范围内的数据之前。所以angular还是不在乎你把它拿走了。cimpile函数发生在链接之后，然后在不发出警报的情况下将其删除，从而导致DOM树出现问题。因此，如果该指令位于被删除的元素之后，它就会受到影响。为了更好地理解该过程，我建议阅读有关该服务的内容

<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>



<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>