发表于: 2017-06-19 22:37:13
1 955
今天完成的任务:
main页面当前激活页面的样式,ui路由$state,$stateProvider等方法的使用和理解。
明天的计划:
检查复盘项目代码,开始微信小程序的学习。
遇到的问题:
1 激活页面如何保持提示样式?
比如
hover有效果,当前所在的页面也会出现相应的提示。
解决:
在jq中,可以使用sessionStorage保存上次点击的div,对其设置相应的提示样式。
在angular中,则可以使用$state来检测当前页面的url地址,通过ng-class来设置相应的样式
主要代码如下:
<li class="nav-page" ui-sref="myApp.home" ng-class="{navChoice: $state.includes('myApp.home')}">首页
<span class="nav-page-underline"></span>
</li>
$state方法详细介绍:
$state:$state服务负责代表状态及提供状态之间的转换。它还提供你当前的状态及上一个状态。
依赖:$rootScope $q $view $injector $resolve $stateParams $urlRouter
方法:
①get(stateOrName,context);
返回任何指定的状态或所有状态的配置对象。
参数:
stateOrName:如果提供此参数,返回的是指定状态的配置对象;如果不提供此参数,则返回全部状态的配置对象。
context:当context是一个相对的参考状态,状态会在相关上下文中检索。
②Go(to,params,options);
参数:
to:string,即将跳转的状态。
params:object,跳转所带的参数。
options:object,可选配置对象。有 location(是否更新地址栏的url,或以什么字符串替换url),inherit(是否继承当前url的参数),relative(当变化相对路径:如"^,定义的状态是相对的),notify(是否广播$stateChangeStart和$stateChangeSuccess事件),reload(是否重新载入)。
代码:
$state.go('contact.detail');
③href(stateOeName,params,options);
一个URL生成方法,返回为给定的状态填充指定的参数编译后的链接。
参数:
stateOeName:string,你想要生成的url的状态或者状态对象。
params:object,一个用于填充状态需要的参数的对象。
options:可选配置对象。有lossy(当第一个参数url未被提供时是否继承导航的url进行构建href),inherit(是否继承当前url的参数),relative(当变化相对路径:如"^,定义的状态是相对的),absolute(是否生成绝对url)。
代码:
$state.href("about.person", { person: "bob" })
④include(stateOrName,params,options);
一个确定当前有效的状态是不是与stateOrName平级的还是其子状态。
参数:
stateOeName:string,部分名称,相对名称,或者通过当前状态进行全局模式查找。
params:object,一个参数对象。
options:可选配置对象。有relative。
代码:
<div ng-class="{highlighted:$state.includes('.item')}">Item</div>
$state.$current.name = 'contacts.details.item'; $state.includes("contacts"); // true $state.includes("contacts.details"); // true $state.includes("contacts.details.item"); // true $state.includes("contacts.list"); // false $state.includes("about"); // false
收获:
angular中涉及到样式的切换,保持,改变,都是基于ng-class,利用不同的方法,参数来设置true,false。
ui-路由中有很多有用的参数或者方法,要熟练掌握。
评论