发表于: 2017-06-29 21:56:10
1 953
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
复盘项目ui自检
明天计划的事情:(一定要写非常细致的内容)
复盘项目代码codeview
遇到的问题:(遇到什么困难,怎么解决的)
ui-sref、$state.go() 的区别?
ui-sref
一般使用在 <a>...</a>或者<button>...</button>
标签之中;
在HTML中:
<button class="btn btn-default btn-block" ui-sref="field.manager">取消</button>
$state.go('someState')
一般使用在 controller或者 directive 里面;
在JS文件中:
//跳页
scope.goPage = function (page) {
if (isDisabled(page)) return;
$state.go($state.current, {page: page || 1, size: scope.size},
{reload: true});
};
这两个本质上是一样的东西,我们看 ui-sref 的源码:
...
element.bind("click", function(e) {
var button = e.which || e.button;
if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) {
var transition = $timeout(function() {
// HERE we call $state.go inside of ui-sref
$state.go(ref.state, params, options);
});
ui-sref 最后调用的还是$state.go()方法
2 如何传递参数
首先,要在目标页面定义接受的参数:
//根据传递过来的参数是否带有 id 判断 --> article新增|编辑
.state('field.articleDetail', {
url: '/articleDetail?id',
templateUrl: 'views/ContentManagement/articleDetail.html',
controller: 'articleDetailCtrl',
controllerAs: 'vm',
resolve: {
//懒加载多个文件 要加中括号
loadMyFile: _lazyLoad([
'js/controllers/ContentManagement/articleDetail.js',
'metaUmeditor'
])
}
})
传参
ui-sref:
<button class="btn btn-sm btn-info" ui-sref="field.articleDetail({id:item.id})">
<span class="glyphicon glyphicon-edit"></span> 编辑
</button>
$state.go:
// 编辑
if (vm.params.id) {
//查询article ID
ArticleManagementService.getArticle(vm.params.id).then(function (res) {
console.log(res);
vm.params = res.data.data.article;
});
接收参数,
在目标页面的controller里注入$state,然后 "$state.参数名" 获取
收获:(通过今天的学习,学到了什么知识)
$urlRouterProvider.otherwise('/dashboard');
//在浏览器地址栏输入的路径没有匹配的路由的时候,跳转(重定向)到一个默认的路径,用来配置非 $state 的额外的路由
评论