Angularjs 1.x 控制器在指令中没有响应
Angularjs 1.x controller not responding in directive
所以我想把我的菜单分成一个指令。我有一个非常简单的控制器:
function Menu(){
self = this;
self.tab = '';
self.selectedTab = function(tab){
self.tab=tab;
console.log('setting tab');
}
}
angular.module('app.menu')
.controller('MenuController',Menu);
和一个简单的指令:
function MenuDirective(){
return {
templateUrl:'Menu.html',
controller:'MenuController',
controllerAs:'menu'
};
}
angular.module('app.menu')
.directive('MenuDirective', MenuDirective)
app.menu
模块包含在我的 app.js
中,我的指令在 index
上作为 <menu-directive></menu-directive>
。我的 Menu.html
中的代码显示正确,但是当我单击其中一个看起来像 <li class='menuTab' ng-class="{'active': menu.tab === '/'}"><a href="#/" class='menuAnchor' ng-click="menu.selectedTab('/')">Home</a></li>
的链接时,我的控制台日志没有显示,我的 css 也不起作用。有 ideas/hints 吗?如果我把它放回索引页而不是指令中,一切都很好。使用 Angular 1.5.X 框架
你的指令似乎没有看到你的控制器。如果您将控制器函数添加到与您的指令相同的文件中并像这样直接引用它会怎样:
angular.module('app.menu')
.directive('MenuDirective', MenuDirective)
function MenuDirective(){
return {
templateUrl:'Menu.html',
controller: Menu,
controllerAs:'menu'
};
}
function Menu(){
self = this;
self.tab = '';
self.selectedTab = function(tab){
self.tab=tab;
console.log('setting tab');
}
}
原来我就是这样 mini-fying(?) 一切。我使用 gulp 将我所有的 javascript 捆绑到一个文件中,将我所有的 css 捆绑到另一个文件中,我猜它不喜欢那样。我删除了我的包,并将每个文件分别添加到我的索引中,它工作正常。感谢大家的帮助。
所以我想把我的菜单分成一个指令。我有一个非常简单的控制器:
function Menu(){
self = this;
self.tab = '';
self.selectedTab = function(tab){
self.tab=tab;
console.log('setting tab');
}
}
angular.module('app.menu')
.controller('MenuController',Menu);
和一个简单的指令:
function MenuDirective(){
return {
templateUrl:'Menu.html',
controller:'MenuController',
controllerAs:'menu'
};
}
angular.module('app.menu')
.directive('MenuDirective', MenuDirective)
app.menu
模块包含在我的 app.js
中,我的指令在 index
上作为 <menu-directive></menu-directive>
。我的 Menu.html
中的代码显示正确,但是当我单击其中一个看起来像 <li class='menuTab' ng-class="{'active': menu.tab === '/'}"><a href="#/" class='menuAnchor' ng-click="menu.selectedTab('/')">Home</a></li>
的链接时,我的控制台日志没有显示,我的 css 也不起作用。有 ideas/hints 吗?如果我把它放回索引页而不是指令中,一切都很好。使用 Angular 1.5.X 框架
你的指令似乎没有看到你的控制器。如果您将控制器函数添加到与您的指令相同的文件中并像这样直接引用它会怎样:
angular.module('app.menu')
.directive('MenuDirective', MenuDirective)
function MenuDirective(){
return {
templateUrl:'Menu.html',
controller: Menu,
controllerAs:'menu'
};
}
function Menu(){
self = this;
self.tab = '';
self.selectedTab = function(tab){
self.tab=tab;
console.log('setting tab');
}
}
原来我就是这样 mini-fying(?) 一切。我使用 gulp 将我所有的 javascript 捆绑到一个文件中,将我所有的 css 捆绑到另一个文件中,我猜它不喜欢那样。我删除了我的包,并将每个文件分别添加到我的索引中,它工作正常。感谢大家的帮助。