Javascript 单击时删除元素-使用AngularJS指令_Javascript_Html_Angularjs_Angularjs Directive

Javascript 单击时删除元素-使用AngularJS指令

javascript html angularjs

Javascript 单击时删除元素-使用AngularJS指令,javascript,html,angularjs,angularjs-directive,Javascript,Html,Angularjs,Angularjs Directive,我想创建一个angular指令，当用户单击该元素时，该指令用于从DOM中删除该元素。我从中看到了答案，并尝试了答案中给出的两种方法，但无法复制相同的方法。这是我的密码 Index.html <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <title>abc</title> <meta charset="UTF-8"> <scrip

我想创建一个angular指令，当用户单击该元素时，该指令用于从DOM中删除该元素。我从中看到了答案，并尝试了答案中给出的两种方法，但无法复制相同的方法。这是我的密码

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>

我在加载页面时遇到以下错误

控制台错误

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)

尝试使用此示例。就我而言，它起作用了

HTML格式的

<button permission-code="'12012'" type="button">Email</button>

尝试使用此示例。就我而言，它起作用了

HTML格式的

<button permission-code="'12012'" type="button">Email</button>

您不能像尝试的那样注入

$scope

。这不是您可以在指令中注入的服务。正确代码：

myApp.directive('removeMe', function () {
    return {
        link: function(scope, element, attrs) {
            element.bind("click",function() {
                element.remove();
            });
        }
    }
});

您不能像尝试的那样注入

$scope

。这不是您可以在指令中注入的服务。正确代码：

myApp.directive('removeMe', function () {
    return {
        link: function(scope, element, attrs) {
            element.bind("click",function() {
                element.remove();
            });
        }
    }
});

在这里检查这个答案看起来您应该使用$rootScope，而不是$scope

var-app=angular.module（'myApp'，[]）；
应用程序指令（“removeMe”，函数（）{
返回{
链接：函数（范围、元素、属性）
{
元素绑定（“单击”，函数（）{
元素。移除（）；
});
}
}
});

点击我
在此处检查此答案
看起来您应该使用$rootScope，而不是$scope

var-app=angular.module（'myApp'，[]）；
应用程序指令（“removeMe”，函数（）{
返回{
链接：函数（范围、元素、属性）
{
元素绑定（“单击”，函数（）{
元素。移除（）；
});
}
}
});

点击我
我做了一个编辑，添加了$rootScope作为依赖项。正确吗？这是正确的答案，但是OP:s的原始代码还有两个错误，现在也在您的答案中。缺少关闭）
来自元素。绑定并在参数名为elt
时使用变量元素。不，不能将作用域插入指令。您可以访问的唯一范围对象是与指令关联的对象，这些对象在link（第一个参数）和directive controller中作为$scope service提供。您可以“注入未被元素辅助的作用域，当您创建指令并尝试注入作用域时就会发生这种情况，就像您在代码中尝试做的那样。@noppa感谢您的关注@SarathSNair您可以按照最初注入$scope
的方式注入$rootScope
。主要区别在于，在模块的生存期内，$rootScope
只有一个实例。由于指令中没有使用$rootScope
（您也不应该），因此不清楚您为什么要这样做。我已将编辑添加的$rootScope作为依赖项。正确吗？这是正确的答案，但是OP:s的原始代码还有两个错误，现在也在您的答案中。缺少关闭）
来自元素。绑定并在参数名为elt
时使用变量元素。不，不能将作用域插入指令。您可以访问的唯一范围对象是与指令关联的对象，这些对象在link（第一个参数）和directive controller中作为$scope service提供。您可以“注入未被元素辅助的作用域，当您创建指令并尝试注入作用域时就会发生这种情况，就像您在代码中尝试做的那样。@noppa感谢您的关注@SarathSNair您可以按照最初注入$scope
的方式注入$rootScope
。主要区别在于，在模块的生存期内，$rootScope
只有一个实例。由于指令中没有使用$rootScope
，所以您为什么要这样做还不清楚（您也不应该这样做）。