Custom Directive Not Working In AngularJS

Question

The code for my angular and the directive is this

angular.module('myapp',[])
.controller('MainController',MainController)
.directive('myDirective',MyDirective);

MainController.$inject = ['$scope'];
MyDirective.$inject = ['$scope'];

function MainController($scope){

    $scope.name = "John";
    $scope.value = 20;
    $scope.color = "Blue";

}

function MyDirective($scope){

    var ddo = {
        restrict : 'AE',
        controller: 'MainController',
        templateUrl : 'mydirective.html'
    }

    return ddo;
}

And it shows the error

angular.min.js:122 Error: [$injector:unpr] http://errors.angularjs.org/1.6.0/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20myDirectiveDirective

Why is that and how to fix this.?

The error message complains about a directive named myDirectiveDirective, trying to inject $scope. The code you posted is unrelated to the error message. And please, don't use the minified version of angular in development: you'll get more readable error messages — JB Nizet
– JB Nizet, Commented Apr 29, 2017 at 20:04
It would help if you could provide the code where you register the directive and the HTML where you use it. — Riiverside
– Riiverside, Commented Apr 29, 2017 at 20:04
Why do you inject $scope like that to the directive? The directive have access by default to the scope outside, unless you create an insulated scope for it. This is just wrong — Alon Eitan
– Alon Eitan, Commented Apr 29, 2017 at 20:26
kk i removed that and it is still showing that error@AlonEitan — Rinku Malik
– Rinku Malik, Commented Apr 29, 2017 at 20:30
@RinkuMalik You removed MyDirective.$inject = ['$scope']; and changed function MyDirective($scope){ to function MyDirective(){ ? — Alon Eitan
– Alon Eitan, Commented Apr 29, 2017 at 20:40

Prateek Gupta · Accepted Answer · 2017-04-29 20:58:55Z

1

I have added the sample for your above problem and edited your code slightly.

You should not inject $scope inside directive. In my sample i have removed the templateUrl to tempate as I created the inline template there only.

Try , running the code snippet . It will give you better idea.

angular.module('myapp',[])
.controller('MainController',MainController)
.directive('myDirective',MyDirective);

MainController.$inject = ['$scope'];


function MainController($scope){

    $scope.name = "John";
    $scope.value = 20;
    $scope.color = "Blue";
    alert('hey!!! controller working fine');
}

function MyDirective(){

    var ddo = {
        restrict : 'AE',
       
        template : '<h1>Directive working fine</h1>'
    }

    return ddo;
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MainController">
<my-directive></my-directive>
</div>
</body>
</html>

Hope, this solves your problem. Thanks :)

answered Apr 29, 2017 at 20:58

Prateek Gupta

1,1791 gold badge11 silver badges26 bronze badges

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

1 Comment

Alon Eitan Over a year ago

Bless you for confirming what I suspect and mention in the comments. The OP replied that it didn't work and you proved that it does

Collectives™ on Stack Overflow

Custom Directive Not Working In AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related