AnjularJS如何在不同的页面之间发送请求和传值
0
[已解决问题]
解决于 2017-06-05 16:09
之前的项目都是用jquery写的，也比较顺利，现在要改用anjular了，首先页面的切换使用的是ui-router ,主要有三个页面，一个是index.html里面是一些html标签，以及css,js的引用，没有具体的内容，只有一个<div ui-view></div> ,另外一个是导航栏 navbar.html，故名思议就是有很多菜单，还有一个main页面，就以一个div里面有一段话，再有就是一个展示页面，view.html，里面是一个表格。现在是打开网页之后默认显示的是index.html+navbar.html+main.html,然后我需要点击导航栏的菜单，跳转到view页面上，当然跳转页面已经实现了，但是，我再点击的时候需要发送请求到后台，然后后台返回数据到view.html,也就是说发送请求的页面与接收返回值的页面不是同一个页面，现在的问题是，导航栏上有很多菜单，每个菜单都有一个属性值，我需要在点击的时候，获取哪个属性值，然后发送到后台，然后前台再接收，这一点不知道怎么做？是需要在navbar.html上的每个链接上都加上ng-click指令吗，希望有人可以给我一个具体的实例作参考
问题补充：
这是navbar.html
<!--页头开始--> <div id="header" class="page-header" role="navigation"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img alt="Brand" src="../images/cpa.png"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!--这里使用ui-sref将超链接和路由建立联接--> <ul class="nav navbar-nav"> <!--ui-sref=".required"说明当点击这个链接的时候路由会跳转到相应的包含required状态的路由中--> <!--这里使用ui-sref链接路由状态，将该状态的url替换到href中，相当与href="#/PageTab/xiaomi"--> <li ui-sref-active="active" ui-sref=".main"><a href="javascript:void(0)">首页</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">在线练习 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu" id="unitExam"> <li ui-sref-active="active" ui-sref=".unitExam"><a ng-click="" href="javascript:void(0)" typeCode="1">会计基础</a></li> <li ui-sref-active="active" class="divider"></li> <li ui-sref-active="active" ui-sref=".unitExam"><a href="javascript:void(0)" typeCode="2">会计电算化</a></li> <li class="divider"></li> <li ui-sref-active="active" ui-sref=".unitExam"><a href="javascript:void(0)" typeCode="3">财经法规与职业道德</a></li> </ul> </li> <li><a href="javascript:void(0)">模拟测验</a></li> <li><a href="javascript:void(0)">用户中心</a></li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> <!--页头结束--> <div ui-view> </div>
这是路由配置
var routerApp = angular.module('myapp', ['ui.router']); routerApp.config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('navbar', { //路由状态 url: '/navbar', //路由路径 templateUrl: 'navbar.html', //路由填充的模板 controller: 'navbarCtrl' }) .state('navbar.main', { //路由状态 url: '/main', //路由路径 templateUrl: 'main.html' //路由填充的模板 }) .state('navbar.unitExam', { //路由状态 url: '/unitExam', //路由路径 templateUrl: 'unitExam.html',//路由填充的模板 controller: 'UnitExamCtrl' //控制器 }); // 默认路径，在status中匹配不到时执行 $urlRouterProvider.otherwise('/navbar/main'); });
最佳答案
0
好像是通过定义angular service来进行数据共享
奖励园豆：5
怎么在点击切换页面的同时，发送请求
@陈无问: https://www.zhihu.com/question/33565135
