I've working on refactoring my Controllers, Factories and Directives to the remended Angular-Style-Guide for Angular Snippets.

I've gotten the Controllers and Factories working correctly with the new style, but not the Directives.

Unknown provider: $scopeProvider <- $scope <- platformHeaderDirective

The new Directive style with errors:

(function() { "use strict";

    angular
        .module('platformHeaderDirectives', [])
        .directive('platformHeader', directive);
    directive.$inject = ['$scope'];
    /* @ngInject */
    function directive ($scope) {
        var directive = {
            templateUrl : "header/platform_header/platformHeader.html",
            restrict    : "E",
            replace     : true,
            bindToController: true,
            controller: Controller,
            controllerAs: 'vm',
            link: link,
            scope: {
            }
        };
        return directive;
        function link(scope, element, attrs) {

        }
    }
    /* @ngInject */
    function Controller () {

    }
})();

My old working Directive that does not throw errors:

(function() { "use strict";

    angular.module('platformHeaderDirectives', [])

    .directive('platformHeader', function() {
        return {
            templateUrl : "header/platform_header/platformHeader.html",
            restrict    : "E",
            replace     : true,
            scope       : false,
            controller  : ['$scope',
                           function($scope) {

                /** Init platformHeader scope */
                // var vs = $scope;

            }]
        }
    });

})();

I've working on refactoring my Controllers, Factories and Directives to the remended Angular-Style-Guide for Angular Snippets.

I've gotten the Controllers and Factories working correctly with the new style, but not the Directives.

Unknown provider: $scopeProvider <- $scope <- platformHeaderDirective

The new Directive style with errors:

(function() { "use strict";

    angular
        .module('platformHeaderDirectives', [])
        .directive('platformHeader', directive);
    directive.$inject = ['$scope'];
    /* @ngInject */
    function directive ($scope) {
        var directive = {
            templateUrl : "header/platform_header/platformHeader.html",
            restrict    : "E",
            replace     : true,
            bindToController: true,
            controller: Controller,
            controllerAs: 'vm',
            link: link,
            scope: {
            }
        };
        return directive;
        function link(scope, element, attrs) {

        }
    }
    /* @ngInject */
    function Controller () {

    }
})();

My old working Directive that does not throw errors:

(function() { "use strict";

    angular.module('platformHeaderDirectives', [])

    .directive('platformHeader', function() {
        return {
            templateUrl : "header/platform_header/platformHeader.html",
            restrict    : "E",
            replace     : true,
            scope       : false,
            controller  : ['$scope',
                           function($scope) {

                /** Init platformHeader scope */
                // var vs = $scope;

            }]
        }
    });

})();

• javascript
• angularjs
• angularjs-directive

• 3 Directive does not take a scope injection. Please remove it and try. – Chandermani Commented May 16, 2015 at 4:44
• @Chandermani ah! That was it!!! Thanks :) Hmm I need to do a issue request for that repo – Leon Gaban Commented May 16, 2015 at 4:47

2 Answers 2

$scope can not be injected to directive. i have changed code to inject $scope in controller of directive.

Code:

(function() { "use strict";

    angular
        .module('platformHeaderDirectives', [])
        .directive('platformHeader', directive);
    
    /* @ngInject */
    function directive () {
        var directive = {
            templateUrl : "header/platform_header/platformHeader.html",
            restrict    : "E",
            replace     : true,
            bindToController: true,
            controller: Controller,
            controllerAs: 'vm',
            link: link,
            scope: {
            }
        };
        return directive;
        function link(scope, element, attrs) {

        }
    }
    /* @ngInject */
    Controller.$inject = ['$scope'];
    function Controller ($scope) {

    }
})();

I know you got your answer but let me explain the actual picture.

$scope is not a service($scopeProvider is not exist in angular js) it is something special that is injected by angular itself into the controller as a child of $rootScope.

so you cannot explicitly inject it in service,directive...etc.

But as the answer explained by 'jad-panda' you can inject it explicitly in the controller of direcitve (not directly to the directive).