AngularJS: 为什么我的指令不能使用 $scope?
AngularJS: Why does my directive cannot use $scope?
我写了一个非常简单的 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"]);
但是当我使用它时,出现了这个错误:
Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- tabsDirective
我不知道它是从哪里来的,我已经做了几十个 modules/directive,而且我想我已经像往常一样做了这个...
我坚持了几个小时,请帮忙 !!!!
编辑:我没有指定它,但我正在使用 requirejs,这是导致此问题的原因。
终于明白了,我忘记在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;
});
错误是您没有将 tabs 函数传递给 angular 的指令方法。查看参数不匹配:
define(["angular","./controller","./tabs","./pane"],function(tabsController,tabs,pane){
改为:
define(["angular","./controller","./tabs","./pane"],function(angular, tabsController, tabs, pane){
我写了一个非常简单的 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"]);
但是当我使用它时,出现了这个错误:
Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- tabsDirective
我不知道它是从哪里来的,我已经做了几十个 modules/directive,而且我想我已经像往常一样做了这个...
我坚持了几个小时,请帮忙 !!!!
编辑:我没有指定它,但我正在使用 requirejs,这是导致此问题的原因。
终于明白了,我忘记在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;
});
错误是您没有将 tabs 函数传递给 angular 的指令方法。查看参数不匹配:
define(["angular","./controller","./tabs","./pane"],function(tabsController,tabs,pane){
改为:
define(["angular","./controller","./tabs","./pane"],function(angular, tabsController, tabs, pane){