CODEWITHSUNDEEP
angularjs
Rinku Malik
Rinku Malik

Reputation: 71

Custom Directive Not Working In AngularJS

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

Upvotes: 0

Views: 328

Answers (1)

Prateek Gupta
Prateek Gupta

Reputation: 1169

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

Upvotes: 1

Related Questions