console。log(data);
for(index in data){
$scope。news。push(data[index]);
console。log(index);
}; });
$scope。goNewsPage=function(news){
pp。setNews(news);
$state。go("first。page",{pageNo:news。id});
console。log(pp。getNews());
}
因为该页面是主页面下的子页面,所以自动集成主页面下的$scope。news数组和$scope。goNewsPage函数。在AngularJS中会从父层自动继承$scope之中的变量和函数方法,在ng-app包裹的最外层还有一个全局继承的$rootscope,相当于全局变量,使用时只需依赖注入controller之中就好。每个scope的作用域都只在当前controller之内,如果两个同等级的controller之间需要传参数可以使用AngularJS的service服务或者router的paramer传递。这里就是用了一个自定义的service用来存储当前选择的元素信息,在AngularJS中所有的service都是单例,所以只会生成一个对象。
图 4。8 新闻资讯详情
HTML
<p class="child-page" ng-controller="childPageCtrl">
<p class="header">
<h1 class="title">#2017禾粒周记##第16周#</h1>
<p class="date">2017。04。23</p></p>
<p class="body">
<p> 如果在农场和我们的团队一起待几天,我想大家对有机食材会更加珍惜,更能体会“谁知盘中餐、粒粒皆幸苦”,您看看农场员工的手,是这般粗糙黝黑、老茧纵横,而这一双双手曾经也白皙光滑……
</p><img src="img/1-1。jpg"> <p>
上百亩的土地,不用农药不打除草剂,全凭我们的双手来除草播种,更何况还有大量的基础建设也是我们自己完成。曾经村里的村民说我们这样是种不出蔬菜的,现如今这片土地上瓜果菜生长的是那般生机勃勃……</p>
<img src="img/1-2。jpg">
<img src="img/1-3。jpg">
<img src="img/1-4。jpg">
<img src="img/1-5。jpg">
<img src="img/1-6。jpg">
<img src="img/1-7。jpg">
<p> 劳动之余,我们静静享受自然的阳光和微风,逗逗小狗、玩玩老家的字牌游戏,何等惬意…… </p>
<img src="img/1-8。jpg" >
<img src="img/1-9。jpg" >
<img src="img/1-10。jpg">
<img src="img/1-11。jpg">
</p></p>
JS
$urlRouterProvider。otherwise("/first/home");
$stateProvider
。state('first。page',{
url: "/news/page{pageNo}",
templateUrl:function($routeParams){
return 'views/'+$routeParams。pageNo+"。html";
}})
这里的页面跳转问题一度困扰了我好一阵子,主要是需要实现传入参数进行动态加载相应HTML页面,之前一直想直接在templateUrl之中加载变量,但是均以失败告终。最后查看文档发现可以使用函数返回值。最后终于成功实现了动态跳转页面的功能。由于Angular作为单页面框架,所有的页面都是加载到一个柱模板页面之中的,所以页面的跳转十分依赖路由模块,在Angular路由跳转使用$routeProvider完成,这里我使用了ui-router插件更方便的完成了路由的管理。路由的过滤需要用到$urlRouterProvider。otherwise,它可以将其他不符合规则的url地址重定向到指定的地址。 HTML5禾粒农场智能管理系统门户网站设计(8):http://www.youerw.com/jisuanji/lunwen_96771.html