发表于: 2017-06-29 21:56:10

1 951


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了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 的额外的路由



返回列表 返回列表
评论

    分享到