AngularJS: Why does my directive cannot use $scope?

Question

I wrote a really simple angular module that allows a tabbed-navigation (the code is simplified, but does not work either):

module.js

define(["angular","./controller","./tabs","./pane"],function(tabsController,tabs,pane){

    var module = angular.module("tabsModule",[])
    .controller("tabsController",["$scope",tabsController])
    .directive("tabs",tabs)
    //.directive("pane",pane);
    return module;
});

tabs.js

define([], function() {
    function tabs() {
        var directive = {
            restrict: "E",
            controller: "tabsController",
            scope: true,
            templateUrl: "html/directives/tabs.html",
            link: {
                pre: function(scope, element, attrs, controller) {
                    scope.addPane = controller.addPane.bind(controller);
                    scope.select = controller.select.bind(controller);

                }
            },
            //    transclude: true,
        };
        return directive;
    }
    return tabs;
});

controller.js

define(["controllers/prototypes/base_controller"],function(BaseController){
    var TabController=BaseController.extend({
        constructor:function($scope){
            BaseController.call(this,$scope);
            this.$scope.panes = [];
            this.directivesEvents=directivesEvents;
        },
        addPane:function(pane) {
            if (pane.order === 0) {
                this.$scope.select(pane);
            }
            this.$scope.panes = this.$scope.panes.concat(pane).sort(function(a, b) {
                return a.order - b.order;
            });
        },
        select:function(pane) {
            angular.forEach(this.$scope.panes, function(pane) {
                pane.selected = false;
            });
            pane.selected = true;
            this.$scope.$emit(this.directivesEvents.TAB_CHANGE, pane.id);
        }
    });
    var TabController=function($scope){

    };
    TabController.$inject=["$scope"];
    return TabController;
});

and I include the module in another one:

var directives=angular.module("directives",["tabsModule"]);

But when I use it, I got this error:

Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- tabsDirective

I have no idea where it comes from, I've made dozens of modules/directive, and I think I've made this one like I always do...

I'm stuck on it for hours, please help !!!!

Edit: I didn't specify it but I was using requirejs, and it was the cause of this issue.

It's working for me plnkr.co/edit/MWyO99jZeryqmH7viTwO?p=preview — sbedulin
– sbedulin, Commented Jun 26, 2015 at 14:28
damn! I'm gonna investigate a bit more and edit my question... — n00dl3
– n00dl3, Commented Jun 26, 2015 at 14:34
tabsDirective isn't taking any dependency on $scope, nor should it... From the angular docs, do this: link: { pre: function preLink(scope, iElement, iAttrs, controller) { ... }, post: function postLink(scope, Element, iAttrs, controller) { ... } } — Callum Linington
– Callum Linington, Commented Jun 26, 2015 at 15:11

Raulucco · Accepted Answer · 2015-06-29 09:19:44Z

1

The error is that you are not passing the tabs function to the directive method of angular. See the mismatch of the parameters:

define(["angular","./controller","./tabs","./pane"],function(tabsController,tabs,pane){

Instead do:

define(["angular","./controller","./tabs","./pane"],function(angular, tabsController, tabs, pane){

answered Jun 29, 2015 at 9:19

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

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

2 Comments

Raulucco Over a year ago

It looks like we unswared at the same time

n00dl3 Over a year ago

yeah, but I'll give you all the glory :-)

n00dl3 · Accepted Answer · 2015-06-29 09:18:07Z

0

Finally, I just got it, I forgot to add angular as parameter in module.js, so every argument was in the wrong place.

define(["angular","./controller","./tabs","./pane"],function(angular,tabsController,tabs,pane){

    var module = angular.module("tabsModule",[])
    .controller("tabsController",["$scope",tabsController])
    .directive("tabs",tabs)
    //.directive("pane",pane);
    return module;
});

answered Jun 29, 2015 at 9:18

n00dl3

21.6k8 gold badges70 silver badges77 bronze badges

Collectives™ on Stack Overflow

AngularJS: Why does my directive cannot use $scope?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related