Remove element on click - using AngularJS Directive

Question

I want to create an angular directive which is used to remove the element from DOM when user clicks on it. 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

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

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)

dfsq · Accepted Answer · 2016-05-01 17:55:30Z

3

You can't inject $scope like you are trying to do. 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();
            });
        }
    }
});

edited May 1, 2016 at 17:55

answered May 1, 2016 at 17:49

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sarath S Nair Over a year ago

i have made an edit- added $rootScope as a dependency. Is that correct ?

noppa Over a year ago

This is the right answer, but the OP:s original code also had two more errors that are now in your answer too. Missing closing ) from element.bind and using variable element when the parameter is named elt.

dfsq Over a year ago

No, you can't inject scope into directive. The only scope object you can access is the one associated with a directive, and those is available in link (the first arg) and in directive controller as $scope service. You can' inject scope which is not assiated with element, and this happens when you create directive and try to inject scope like you are trying to do in you code.

dfsq Over a year ago

@noppa Thank you for sharp eye!

noppa Over a year ago

@SarathSNair You can inject $rootScope the way you injected $scope originally. The main difference is that there will be only one instance of the $rootScope in the lifetime of the module. It is unclear though why you'd want to do that as you are not using $rootScope in the directive (nor should you).

Community · Accepted Answer · 2017-05-23 12:26:39Z

1

Check this answer here https://stackoverflow.com/a/21595931/2700949 It seemes you should use $rootScope and not $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>

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered May 1, 2016 at 17:51

YonatanHanan

485 bronze badges

Comments

Thinira · Accepted Answer · 2016-05-01 17:46:40Z

0

Try to use this sample. In my case it's worked.

in HTML

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

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

        }]
    };
});

answered May 1, 2016 at 17:46

Thinira

3713 silver badges8 bronze badges

Collectives™ on Stack Overflow

Remove element on click - using AngularJS Directive

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related