我将Node.js用作服务器，除非将AngularJS添加到堆栈中，否则它将完全正常工作，这会完全破坏Node.js中的所有URL。具体来说，我想active在Bootstrap 3导航栏中切换选项卡，以响应选项卡的点击，但我希望AngularJS仅切换选项卡的活动/非活动状态，并且不希望AngularJS站在其他任何选项中，由Node来管理。
所以这是我在Angular中的代码：
"use strict";
var MyApp = angular.module("MyApp", ["ngRoute"]);
MyApp.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
$routeProvider.
when("/contact", {controller: MyCtrl}).
when("/blog", {controller: MyCtrl});
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix("!");
}]);
和控制器代码：
function MyCtrl($scope, $routeParams, $location) {
$scope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
}
和HTML代码：
<div class="collapse navbar-collapse" ng-controller="MyCtrl">
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}"><a href="/">Home</a></li>
<li ng-class="{ active: isActive('/blog')}"><a href="/blog">Blog</a></li>
<li ng-class="{ active: isActive('/contact')}"><a href="/contact">Contact</a></li>
</ul>
</div>
但是，当我从Chrome浏览器中点击任何选项卡时，切换开关可以正常工作-例如，当我点击“博客”选项卡时，该选项在Bootstrap 3导航栏中处于活动状态。但是，该页面无法正确过渡，因此实际的Blog内容无法显示在屏幕上-它所做的全部更改都是选项卡切换。
更糟的是，当我点击屏幕上的其他内容时，该内容超出了Bootstrap 3导航栏的控制范围，那么它仍然会使过渡中断，并且页面仍保持为预点击状态。
那么，如何正确地将页面转换为正确的页面，并使Angular仅切换导航栏选项卡的活动/非活动状态？我不使用AngularJS模板，只希望它控制切换功能。
请注意，即使点击切换不起作用，当我在浏览器窗口中输入URL并按回车键时，该切换也能正常工作。奇怪的。
结合使用AngularJS和AngularJSngRoute意味着AngularJS将尝试处理您的所有路由要求，但是如果没有它，您可以轻松解决。要将路由处理留给Node：
ngRoute依赖性，然后.config完全删除您的部分。$routeParams从您的控制器中删除ng-controller="MyCtrl"到body元素中。$location现在应该可以正常工作，以仅更新选项卡类。如果不是，请$window.location.pathname改用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句