Question

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

的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

    var app = angular.module('myApp', []);
app.directive("removeMe", function($rootScope) {
      return {
            link:function(scope,element,attrs)
            {
                element.bind("click",function() {
                    element.remove();
                });
            }
      }
});

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

控制台-错误

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)

Answer 1

你不能像你想要的那样注射$scope。这不是您可以在指令中注入的服务。正确的代码：

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

Answer 2

在此处查看此答案https://stackoverflow.com/a/21595931/2700949 它看起来你应该使用$ rootScope而不是$ scope。

＆＃13;

var app = angular.module('myApp', []);
app.directive("removeMe", function() {
      return {
            link:function(scope,element,attrs)
            {
                element.bind("click",function() {
                    element.remove();
                });
            }
      }
});

＆＃13;

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

＆＃13;

Answer 3

尝试使用此示例。在我的情况下它是有效的。

HTML中的

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

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();
            }

        }]
    };
});

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

3 个答案: