小编Ada*_*dam的帖子

我找到的最好的是http://www.ng-newsletter.com/posts/angular-ui-router.html.它不会去深,例如,在该命令$stateChangeStart,exampleState.onEnter,exampleState.resolve,和exampleState.templateProvider火灾.

一个很好的答案格式是干净的.就像是:

1. 状态foo的初始页面加载:

   1. 角度生命周期步骤1
   2. UI路由器生命周期第1步
   3. UI路由器生命周期解决发生
   4. UI路由器生命周期onEnter fires
   5. 角度生命周期第2步

2. 状态改变foo - > 吧

   1. $stateChangeStart 事件火灾
   2. foo onExit火
   3. 酒吧 onEnter火灾
   4. templateUrl 得到模板
   5. UI路由器在摘要循环(或任何地方)中插回Angular生命周期.

3. 嵌套状态

4. 多个命名视图:

5. ui-sref点击了

等等......谢谢!

编辑:调试功能提供了足够的洞察力,以满足需要.请参阅下面的答案以获取代码段.

我试图从这个数组中的对象生成一个宽五行的div网格:

[{n:'a'},{n:'b'},{n:'c'},{n:'d'}...{n:'y'}];

该数组可以包含1到50个对象,数据格式是来自Spine.js模型的1d数组.为了分离数据和表示,我希望将数据保存在1d数组中,并使用视图(把手模板)代码在每第5个项目上开始一个新行,如下所示:

<div class="grid">
  <div class="row">
    <div class="cell"> a </div>
    <div class="cell"> b </div>
    <div class="cell"> c </div>
    <div class="cell"> d </div>
    <div class="cell"> e </div>
  </div>
  <div class="row">
    <div class="cell"> f </div>
    etc...
</div>

我有一个解决方案,通过在辅助函数中返回整个字符串.只有我的模板看起来像:

<script id="grid-template" type="text/x-handlebars-template">
  {{#grid}}
  {{/grid}}
</script>

这似乎违背了使用模板的要点.是否有一种简单的方法来创建如上所述的网格,其中代码主要位于模板中？

[编辑]解决方案

根据@ Sime的答案修改控制器中的数据.

模板代码:

<script id="grid-template" type="text/x-handlebars-template">
  {{#rows}}
    <div class="row">
      {{#cells}}
        <div class="cell">
          {{n}}
        </div>
      {{/cells}}
    </div>
  {{/rows}}
</script>

控制器渲染代码():

  this.data=[{n:'a'},{n:'b'},{n:'c'},{n:'d'}...{n:'y'}]; // previously set
  this.rows=[];
  var step=5,
  i=0,
  L=this.data.length;
  for(; i<L ; i+=step){
    this.rows.push({cells:this.data.slice(i,i+step)});
  };

  this.el.html(this.template(this));

我正在创建一个异步可观察数组,Rx.Observable.create()并希望.toArray()在完成时使用它来获取所有值.

console.log('running');
let valsArray = ['a','b','c'].map((val,i)=>{
  return Rx.Observable.create((obs)=>{
    let tid = setTimeout(()=>{
      console.log(val + ' timing out');
      obs.onNext(val);
    },i*500);
    return ()=>{
      clearTimeout(tid);
    };
  }).publish().refCount();
});

Rx.Observable.from(valsArray)
.flatMap((v)=>v)
.toArray()
.subscribe((arr)=>{
  console.log("arr should be ['a','b','c']",arr);
});

以上示例位于http://jsbin.com/wegoha/10/edit?js,console.

使用setTimeout作为一个独立于其他异步操作,以保持例子简单.