单击时删除元素-使用AngularJS指令
[英]Remove element on click - using AngularJS Directive
问题描述
I want to create an angular directive which is used to remove the element from DOM when user clicks on it. 
我想创建一个角度指令，当用户单击它时，该指令用于从DOM中删除该元素。 I saw answers from here and tried with both methods given in the answers but not able to replicate the same. 我从这里看到了答案，并尝试了答案中给出的两种方法，但无法复制它们。 This is my code 这是我的代码
Index.html Index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>abc</title>
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<p remove-me>Remove This Element</p>
</body>
</html>
script.js script.js
var app = angular.module('myApp', []);
app.directive("removeMe", function($rootScope) {
return {
link:function(scope,element,attrs)
{
element.bind("click",function() {
element.remove();
});
}
}
});
I am getting the below error on page loading 我在页面加载时遇到以下错误
Console-Error 控制台错误
angular.min.js:117 Error: [$injector:unpr] http://errors.angularjs.org/1.5.5/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20removeMeDirective
at Error (native)
at file:///C:/Users/SARATH%20S%20NAIR/Desktop/abcd/angular.min.js:6:412
at file:///C:/Users/SARATH%20S%20NAIR/Desktop/abcd/angular.min.js:43:84
at Object.d [as get] (file:///C:/Users/SARATH%20S%20NAIR/Desktop/abcd/angular.min.js:40:344)
at file:///C:/Users/SARATH%20S%20NAIR/Desktop/abcd/angular.min.js:43:146
at d (file:///C:/Users/SARATH%20S%20NAIR/Desktop/abcd/angular.min.js:40:344)
at e (file:///C:/Users/SARATH%20S%20NAIR/Desktop/abcd/angular.min.js:41:78)
at Object.invoke (file:///C:/Users/SARATH%20S%20NAIR/Desktop/abcd/angular.min.js:41:163)
at file:///C:/Users/SARATH%20S%20NAIR/Desktop/abcd/angular.min.js:52:329
at q (file:///C:/Users/SARATH%20S%20NAIR/Desktop/abcd/angular.min.js:7:355)
3 个解决方案
解决方案1
3 已采纳 2016-05-01 17:49:04
You can't inject $scope like you are trying to do. 您不能像尝试那样注入$scope 。 This is not a service you can inject in directive. 这不是您可以在指令中注入的服务。 Correct code: 正确的代码：
myApp.directive('removeMe', function () {
return {
link: function(scope, element, attrs) {
element.bind("click",function() {
element.remove();
});
}
}
});
解决方案2
1 2016-05-01 17:51:06
Check this answer here https://stackoverflow.com/a/21595931/2700949 It seemes you should use $rootScope and not $scope. 在此处检查此答案https://stackoverflow.com/a/21595931/2700949看来您应该使用$ rootScope而不是$ scope。
var app = angular.module('myApp', []); app.directive("removeMe", function() { return { link:function(scope,element,attrs) { element.bind("click",function() { element.remove(); }); } } });
<div class="showw" ng-app="myApp"> <div id="hideDivOnClick" src="ddd.png" remove-me>Click me</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
解决方案3
0 2016-05-01 17:46:40
Try to use this sample. 尝试使用此示例。 In my case it's worked. 就我而言，它是有效的。
in HTML 在HTML中
<button permission-code="'12012'" type="button">Email</button>
in Script.js 在Script.js中
angular.module("myApp").directive("permissionCode", function () {
return {
restrict: 'A',
scope: {
permissionCode: "="
},
controller: ["$scope", "$element", function ($scope, $element) {
if ($scope.permissionCode == '12012') {
angular.element($element).remove();
}
}]
};
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.