AngularJS - 点击未到达控制器方法
AngularJS - On click not reaching controller method
我正在通过开发一个项目来学习 Angularjs 和 Nodejs。
我已经按照这个 tutorial 组织了我的文件夹结构和路由配置。
问题:
我添加了一个名为 isActive 的方法来根据选项卡点击更新 ng-class。但是当我单击选项卡时,它并没有调用 isActive 方法。
我的猜测是,我在 appRoutes.js 中做错了什么,但不确定如何解决这个问题。我可以访问 MainController 但无法访问其中的方法。
我还有一个问题,我需要在进入应用程序或单击主页选项卡或单击应用程序时激活主页选项卡header。
下面是html和js代码。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<title>ets</title>
<link rel="stylesheet" type="text/css" href="libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/ets.css">
</head>
<body ng-app="etsApp">
<div id="mainDiv">
<div>
<section id="header_section" class="main-title"></section>
<section id="nav_section"></section>
</div>
<section id="body_section">
<div ng-view="ng-view"></div>
</section>
<section id="footer_section" class="footer-style"></section>
</div>
<script type="text/javascript" src="libs/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="libs/angular/angular.min.js"></script>
<script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#header_section').load('views/partials/header.html');
$('#nav_section').load('views/partials/navigation_main.html');
$('#footer_section').load('views/partials/footer.html');
});
</script>
</body>
</html>
navigation_main.html
<div>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li ng-class="{active : isActive('/home')}" id="nav_home">
<a href="/home">Home</a>
</li>
<li ng-class="{active : isActive('/expensereporting')}" id="nav_exprep">
<a href="/expensereporting">Expense Reporting</a>
</li>
<li ng-class="{active : isActive('/remainders')}">
<a href="/remainders" id="nav_remain">Todo Remainder's</a>
</li>
<li ng-class="{active : isActive('/pdfoperations')}">
<a href="/pdfoperations" id="nav_pdf">PDF Operation's</a>
</li>
<li ng-class="{active : isActive('/imageoperations')}">
<a href="/imageoperations" id="nav_img">Image Operation's</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" style="margin-right: 20px; color: white;">Login/Register</a></li>
</ul>
</nav>
</div>
header.html
<div>
<header id="header" style="margin-left: 50px;">
<a href="/" style="text-decoration: none; color: black;">
<strong>eTools Store</strong>
</a>
</header>
</div>
appRoutes.js
angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.when('/home', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
});
$locationProvider.html5Mode(true);
}]);
app.js
angular.module('etsApp', ['ngRoute', 'appRoutes', 'HomeCtrl', 'MainCtrl']);
MainCtrl.js
angular.module('MainCtrl', []).controller('MainController', function($scope) {
console.log('Main Controller');
$scope.isActive = function(destination) {
console.log($location.path());
return destination === $location.path();
}
});
关于未到达 isActive 方法的问题:
尝试重组:
<script type="text/javascript" src="js/controllers/MainCtrl.js"> </script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
进入:
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
您可以尝试使用 angular ui-router 进行路由并在状态处于活动状态时添加活动 class。你只需要添加ui-sref-active="YourActiveClassHere"。 Angular UI-Router
尝试改变顺序,
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
为此,
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
可能是你忘了加.otherwise
.when('/', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.when('/home', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.otherwise({
redirectTo: '/'
});
更新:
试试这个 -
在navigation_main.html
<li ng-class="{'active' : path}" >
<a href="/imageoperations" id="nav_img" ng-click="itemClicked('/imageoperations')">Image Operation's</a>
</li>
MainCtrl.js
angular.module('MainCtrl', []).controller('MainController', function($scope) {
console.log('Main Controller');
$scope.itemClicked= function(destination) {
$scope.path = destination;
}
});
尝试在您的 a 标签中添加 ng-click=isActive('/home')。
<li ng-class="{active : activeClass == 'home'}" id="nav_home">
<a href="/home" ng-click=isActive('/home')>Home</a>
</li>
在您的 MainCtrl 中添加这一行,
$scope.activeClass = '';
$scope.isActive = function(destination) {
$scope.activeClass = destination;
}
您的 navigation_main.html 不在控制器范围内。这是主要原因。尝试像这样为您的导航创建单独的控制器
.controller('NavCtrl', function($scope) {
isActive = function(destination) { /*...*/ }
}
将其放入文件 js/nav.js 并添加到您的 html
<script type="text/javascript" src="js/nav.js"></script>
然后将此控制器添加到您的 navigation_main.html 代码中
<div ng-controller="NavCtrl">
我正在通过开发一个项目来学习 Angularjs 和 Nodejs。 我已经按照这个 tutorial 组织了我的文件夹结构和路由配置。
问题: 我添加了一个名为 isActive 的方法来根据选项卡点击更新 ng-class。但是当我单击选项卡时,它并没有调用 isActive 方法。
我的猜测是,我在 appRoutes.js 中做错了什么,但不确定如何解决这个问题。我可以访问 MainController 但无法访问其中的方法。
我还有一个问题,我需要在进入应用程序或单击主页选项卡或单击应用程序时激活主页选项卡header。
下面是html和js代码。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<title>ets</title>
<link rel="stylesheet" type="text/css" href="libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/ets.css">
</head>
<body ng-app="etsApp">
<div id="mainDiv">
<div>
<section id="header_section" class="main-title"></section>
<section id="nav_section"></section>
</div>
<section id="body_section">
<div ng-view="ng-view"></div>
</section>
<section id="footer_section" class="footer-style"></section>
</div>
<script type="text/javascript" src="libs/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="libs/angular/angular.min.js"></script>
<script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#header_section').load('views/partials/header.html');
$('#nav_section').load('views/partials/navigation_main.html');
$('#footer_section').load('views/partials/footer.html');
});
</script>
</body>
</html>
navigation_main.html
<div>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li ng-class="{active : isActive('/home')}" id="nav_home">
<a href="/home">Home</a>
</li>
<li ng-class="{active : isActive('/expensereporting')}" id="nav_exprep">
<a href="/expensereporting">Expense Reporting</a>
</li>
<li ng-class="{active : isActive('/remainders')}">
<a href="/remainders" id="nav_remain">Todo Remainder's</a>
</li>
<li ng-class="{active : isActive('/pdfoperations')}">
<a href="/pdfoperations" id="nav_pdf">PDF Operation's</a>
</li>
<li ng-class="{active : isActive('/imageoperations')}">
<a href="/imageoperations" id="nav_img">Image Operation's</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" style="margin-right: 20px; color: white;">Login/Register</a></li>
</ul>
</nav>
</div>
header.html
<div>
<header id="header" style="margin-left: 50px;">
<a href="/" style="text-decoration: none; color: black;">
<strong>eTools Store</strong>
</a>
</header>
</div>
appRoutes.js
angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.when('/home', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
});
$locationProvider.html5Mode(true);
}]);
app.js
angular.module('etsApp', ['ngRoute', 'appRoutes', 'HomeCtrl', 'MainCtrl']);
MainCtrl.js
angular.module('MainCtrl', []).controller('MainController', function($scope) {
console.log('Main Controller');
$scope.isActive = function(destination) {
console.log($location.path());
return destination === $location.path();
}
});
关于未到达 isActive 方法的问题:
尝试重组:
<script type="text/javascript" src="js/controllers/MainCtrl.js"> </script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
进入:
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
您可以尝试使用 angular ui-router 进行路由并在状态处于活动状态时添加活动 class。你只需要添加ui-sref-active="YourActiveClassHere"。 Angular UI-Router
尝试改变顺序,
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
为此,
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
可能是你忘了加.otherwise
.when('/', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.when('/home', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.otherwise({
redirectTo: '/'
});
更新: 试试这个 - 在navigation_main.html
<li ng-class="{'active' : path}" >
<a href="/imageoperations" id="nav_img" ng-click="itemClicked('/imageoperations')">Image Operation's</a>
</li>
MainCtrl.js
angular.module('MainCtrl', []).controller('MainController', function($scope) {
console.log('Main Controller');
$scope.itemClicked= function(destination) {
$scope.path = destination;
}
});
尝试在您的 a 标签中添加 ng-click=isActive('/home')。
<li ng-class="{active : activeClass == 'home'}" id="nav_home">
<a href="/home" ng-click=isActive('/home')>Home</a>
</li>
在您的 MainCtrl 中添加这一行,
$scope.activeClass = '';
$scope.isActive = function(destination) {
$scope.activeClass = destination;
}
您的 navigation_main.html 不在控制器范围内。这是主要原因。尝试像这样为您的导航创建单独的控制器
.controller('NavCtrl', function($scope) {
isActive = function(destination) { /*...*/ }
}
将其放入文件 js/nav.js 并添加到您的 html
<script type="text/javascript" src="js/nav.js"></script>
然后将此控制器添加到您的 navigation_main.html 代码中
<div ng-controller="NavCtrl">