AngularJS：为什么我的指令不能使用 $scope？答案

【问题标题】：AngularJS: Why does my directive cannot use $scope?AngularJS：为什么我的指令不能使用 $scope？
【发布时间】：2015-06-26 14:17:42
【问题描述】：

我写了一个非常简单的 Angular 模块，它允许标签式导航（代码被简化，但也不起作用）：

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

我将模块包含在另一个模块中：

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

但是当我使用它时，我得到了这个错误：

错误：[$injector:unpr] 未知提供者：$scopeProvider

我不知道它来自哪里，我已经制作了几十个模块/指令，我想我已经像往常一样制作了这个......

我坚持了几个小时，请帮助 !!!!

编辑：我没有指定它，但我使用的是 requirejs，这是导致此问题的原因。

【问题讨论】：

你能提供plunk链接>>？
它对我有用plnkr.co/edit/MWyO99jZeryqmH7viTwO?p=preview
该死！我将进行更多调查并编辑我的问题...
tabsDirective 不依赖于$scope，也不应该...从角度文档中，这样做：link: { pre: function preLink(scope, iElement, iAttrs, controller) { ... }, post: function postLink(scope, Element, iAttrs, controller) { ... } }
我不明白你的意思...

标签： javascript angularjs requirejs

【解决方案1】：

错误是您没有将 tabs 函数传递给 angular 的指令方法。查看参数不匹配：

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

改为：

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

【讨论】：

看起来我们同时没有发觉
是的，但我会给你所有的荣耀:-)

【解决方案2】：

终于搞定了，我忘了在module.js中添加angular作为参数，所以每个参数都放错了地方。

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

【讨论】：