如何使用纳克开关，作为我的ngRoute＆功放页面路由器; ngView？ [英] How to use ng-switch as a router for my pages with ngRoute & ngView?
问题描述
下面是我的角SPA的高层骨架。我的应用程序即将大专学历的产品。在工程页都有这是目前内置纳克开关，我想尽可能路线转换在一个单独的左导航。我该怎么做，只是采用了棱角分明的本地路由角route.js？
** ** app.js
（功能（）{
VAR应用= angular.module（myCollege，['ngRoute']）; 的app.config（['$ routeProvider'，'$ locationProvider'，
功能（$ routeProvider，$ locationProvider）{ $ routeProvider 。什么时候（'/'， {
templateUrl：应用程序/视图/ /home.html的，
控制器：HomeController中
} 。当（'/ ENGG'，{
templateUrl：应用程序/视图/ engineering.html
控制器：engineeringController
}）
。当（'/ MED'，{
templateUrl：应用程序/视图/ medical.html
控制器：medicalController
}） }]）;
我一直在使用纳克开关留在engineering.html导航，我想
转换为左工程导航的application.This的子路径
页面不是ngView内。我如何达致这采用了棱角分明的
本地ngRoute /角路线？** ** engineering.html＆LT; DIV对资产净值=页面名称（）＆GT NG-开关;
＆LT; DIV NG-开关时=土木工程＆GT;
＆LT; DIV民间指令＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV NG-开关时=计算机工程＆GT;
＆LT; DIV计算机指令＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV NG-开关时=纳米工程＆GT;
＆LT; DIV纳米指令＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV NG-开关时=机电工程＆GT;
＆LT; DIV电 - 指令＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;EngineeringController.js
（函数（）{
VAR应用= angular.module（collegeApp）;
VAR engineeringController = functino（$范围，$ rootscope，$位置） { $ scope.pagename =功能（）{
返回$ location.path（）;
};
app.controller（engineeringController，['$范围，$ rootScope'，'$位置，engineeringController]）
}（））;以上逻辑不为我工作。谁能告诉我在哪里，我在做什么错？
解决方案不是一个好的做法，但这里是你想要如果你想使用纳克开关做什么：
在您的 HTML ，因为你写的，例如：
＆LT;！ - 不要忘记引用您的应用程序，您的控制器 - ＆GT;
＆LT;按钮NG点击=GOTO（'/第1页'）＆GT;转到页1 LT; /按钮＆GT;
＆LT;按钮NG点击=GOTO（'/ 2页'）＆GT;转到第2页＆LT; /按钮＆GT;
＆LT; DIV对资产净值=页面名称（）＆GT NG-开关;
＆LT; DIV NG-开关时=/第1页'＆GT;＆LT; / DIV＆GT;
＆LT; DIV NG-开关时=/第2页'＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV NG-视图＆gt; ＆LT; / DIV＆GT;在 JS
配置你的路由
的app.config（['$ routeProvider'，
功能（$ routeProvider）{
$ routeProvider。
当（'/第1页'，{
templateUrl：意见/ page1.html
}）。
当（'/第2页'，{
templateUrl：意见/ page2.html
}）。
除此以外（{
redirectTo：'/'
}）;
}]）和添加以下在你的控制器：
$ scope.pagename =函数（）{返回$ location.path（）; }; $ scope.goTo =功能（页）{
$ location.path（页）;
}在HTML上面，NG-交换机将使用$ location.path（）可变知道哪个视图显示。
正如我所说的，这不是一个很好的做法，因为你的控制器没有假设来处理路径。
Here is the highlevel skeleton of my Angular SPA. My application is about college degree offerings. In that engineering page has a separate left nav which is currently built on ng-switch which i want to convert as route. How do i do that just using angular's native routing angular-route.js?
**app.js** (function(){ var app=angular.module("myCollege",['ngRoute']); app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) { $routeProvider .when('/', { templateUrl:"app/views/home.html", controller:"homeController", } .when('/engg', { templateUrl:"app/views/engineering.html", controller:"engineeringController", }) .when('/med', { templateUrl:"app/views/medical.html", controller:"medicalController", }) }]);
I have left nav in engineering.html using ng-switch which i want to convert as sub-route of the application.This left nav of engineering page is not inside of ngView. How do i acheive this using angular's native ngRoute/angular-route?
**engineering.html** <div nav ng-switch on="pagename()"> <div ng-switch-when="Civil Engineering"> <div civil-directive> </div> </div> <div ng-switch-when="Computer Engineering"> <div computer-directive> </div> </div> <div ng-switch-when="Nano Engineering"> <div nano-directive> </div> </div> <div ng-switch-when="Electrical Engineering"> <div electrical-directive> </div> </div> </div>EngineeringController.js
(function() { var app =angular.module("collegeApp"); var engineeringController= functino($scope,$rootscope,$location) { $scope.pagename = function() { return $location.path(); }; app.controller("engineeringController",['$scope','$rootScope','$location',engineeringController]) }());The above logic is not working for me. Can someone tell me where i am doing the wrong?
解决方案Not a good practice but here's what you want to do if you want to use ng-switch:
In your html, as you write for example:
<!-- don't forget to reference your app and your controller --> <button ng-click="goTo('/page1')">Go to page 1</button> <button ng-click="goTo('/page2')">Go to page 2</button> <div nav ng-switch on="pagename()"> <div ng-switch-when="'/page1'"></div> <div ng-switch-when="'/page2'"></div> </div> <div ng-view> </div>in js
Config your routes app.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/page1', { templateUrl: 'views/page1.html' }). when('/page2', { templateUrl: 'views/page2.html' }). otherwise({ redirectTo: '/' }); }])and add the following in your controller:
$scope.pagename = function() { return $location.path(); }; $scope.goTo = function(page){ $location.path(page); }In the html above, ng-switch will use the $location.path() variable to know which view to display.
As I said this is not a good practice, because your controller isn't suppose to deal with routes.
这篇关于如何使用纳克开关，作为我的ngRoute＆功放页面路由器; ngView？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
