我创建了一个自定义指令,并为其添加了一个控制器,并且状态hamburgerClick.Here上的函数是我的代码:
directivesModule.directive('headerDir', [function () {
var headerDir = {
restrict: 'E',
templateUrl: 'App/scripts/main/directives/header/HeaderDir.html',
replace: true
};
headerDir.controller = ['$state', function ($state) {
$state.hamburgerClick = function() {
var app = $('.application-wrap');
if (app.hasClass('menu-opened')) {
app.removeClass('menu-opened');
}
else {
app.addClass('menu-opened');
}
};
}];
return headerDir;
}]);
<div>
<span class="menu-overlay"></span>
<section class="menu-bar">
<article>
<div class="menu-button" ng-click="hamburgerClick()">
<span class="hamburger-icon"></span>
</div>
<h1 class="logo"></h1>
</article>
</section>
我的问题是,由于某些原因,当我试图点击它时,该功能没有被执行。是否知道我做错了什么?
答案 0 :(得分:1)
您的代码中有几件事值得怀疑
1)你应该用$ scope替换$ state
2)您不在HTML代码中使用您的指令。相反,您引用名为“article”的指令
3)你使用replace:true,它取代了指令的原始内容。除非您计划将$('。menu-button')定义为header-dir指令,否则将删除对hamburgerClick的调用。
此外,您可以替换
var app = $('.application-wrap');
if (app.hasClass('menu-opened')) {
app.removeClass('menu-opened');
}
else {
app.addClass('menu-opened');
}
与
$('.application-wrap').toggleClass('menu-opened');
答案 1 :(得分:1)
试试这个!
directivesModule.directive('headerDir', [function () {
return{
restrict: 'E',
templateUrl: 'App/scripts/main/directives/header/HeaderDir.html',
replace: true
controller: function($scope){
$scope.hamburgerClick = function() {
var app = $('.application-wrap');
$('.application-wrap').toggleClass('menu-opened');
};
}
}
}]);