Question

使用ui-router在我们的AngularJs应用程序中遇到一个非常奇怪的问题。我们有以下嵌套状态结构...

holder.html

<div ui-view></div>

checkout / index.html - 使用嵌套的ui-views（一个名为）

<div class="col-xs-12" ng-class="checkout.reviewLayoutEnabled ? 'col-md-12' : 'col-md-8'">

      <div class="row">
          <div ui-view="progress"></div>
      </div>

      <div class="row" style="position:relative;">
        <div ui-view="" class="page-fade"></div>
      </div>

   </div>

这就是它应该如何在浏览器中聚集在一起......

<!--holder.html-->
<div ui-view>


   <!--checkout/index.html-->
   <div class="col-xs-12" ng-class="checkout.reviewLayoutEnabled ? 'col-md-12' : 'col-md-8'">

      <div class="row">
          <div ui-view="progress"></div>
      </div>

      <div class="row" style="position:relative;">
        <div ui-view="" class="page-fade">
          <!--checkout/service.html should be here-->
        </div>
      </div>

   </div>


</div>

和相应的州......

.state('root', {
    abstract: true,
    url: '/:lang',
    views: {

      '@': {
        templateUrl: function(params) {
          return views + params.lang + '/holder.html';
        },
        controller: 'MainController as main'
      }

    },
    params: {
      lang: null
    }
  })

.state('root.checkout', {
    url: '/checkout/:type',
    abstract: true,
    views: {

      '@root': {
        templateUrl: function(params) {
          return views + params.lang + '/checkout/index.html';
        },
        controller: 'CheckoutController as checkout'
      },
      'progress@root.checkout': {
        templateUrl: function(params) {
          return views + params.lang + '/checkout/progress.html';
        }
      }

    },
    params: {
      type: null
    }
  })

.state('root.checkout.delivery', {
    url: '/delivery',
    views: {
      '@root.checkout': {
        templateUrl: function(params) {
          return views + params.lang + '/checkout/delivery.html';
        },
        controller: 'CheckoutDeliveryController as delivery'
      }
    }
  })

.state('root.checkout.delivery.service', {
    url: '/service',
    views: {
      '@root.checkout': {
        templateUrl: function(params) {
          return views + params.lang + '/checkout/service.html';
        },
        controller: 'CheckoutServiceController as service'
      }
    }
  })

我们对'root.checkout.delivery'状态没有任何问题，并且'root.checkout.delivery.service'状态在99.9％的时间内通过$ state.go（'root）路由到状态时完美运行。 checkout.delivery.service'） - 但是，有时service.html不会被渲染。没有控制台错误，在dom中找不到service.html（通过chrome dev工具检查时），应用程序的其余部分仍然正常。

我们真的在努力寻找下一步的目标。我们已经排除了服务控制器中的任何JavaScript问题。似乎没有什么破坏，服务html只是没有呈现偶尔。并且问题出现在多个版本的chrome atleast上。我们在整个应用程序中使用了一个非常相似的嵌套状态结构，没有这个问题。

有没有人遇到类似的问题？ service.html或父状态中的任何无效html都会导致这样的事情吗？

任何帮助都将不胜感激。

AngularJS ui-router偶尔不会渲染状态模板

0 个答案: