Question

我使用angularjs和angular ui路由器来加载嵌套模板。子控制器继承父级的$ scope作为其内容。这一切都正常，除非我尝试将子作用域加载为初始视图，子作用域为空。

www.domain.com/products - 父视图 - 有效 www.domain.com/products/product-child view - 从父级导航时起作用。

当我尝试直接加载www.domain.com/products/product时，子模板似乎在父完成之前加载，使子范围为空。

这是ui路由器信息。

.config(function ($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise("/");

$stateProvider
  .state('products', {
    url: "/products",
    templateUrl: "/views/products.html",
    controller: "ProductsCtrl"
  })

  .state('products.product', {
    url: "/:description",
    templateUrl: "/views/product.html",
    controller: "ProductCtrl"
  })
});

我错过了什么？

父视图：

<section class="product-container">

  <a ui-sref="products.product({description:product.description})" ng-repeat="product in     products | orderBy : orderObjectBy(products,'active',true)" class="product" ng-click="" ng-     class="{inactive:!filterProducts(product, products.keywords) && isFilterChecked() , 'selected-    product':(product.selected)}" ng-style="{left: ((product.pos_left*360) + 'px'),top: ((product.pos_top*360) + 'px')}">

    <img ng-src="http://www.tiempotimepiece.com/catalog/{{product.SmallImageUrl}}">
    <p>{{product.description}}</p>
    {{product.price | currency}}
    <p>{{product.order}}</p>

  </a>

  <div ui-view></div>

</section>

子视图：

<div ng-repeat="product in items | filter: {description:description}">
  Sku:{{product.Sku}}<br>
  IdProduct:{{product.IdProduct}}<br>
  price:{{product.price}}<br>
  description:{{product.description}}<br>
  SmallImageUrl:{{product.SmallImageUrl}}<br>
</div>

子控制器使用$ scope。$ parent继承父$ scope。将子视图作为初始页面加载时，子视图/控制器似乎在父视图完成填充范围之前加载。

我在这里缺少什么？谢谢！

更新：我认为服务是这里最快的解决方案，可能是最好的解决方案，但是如果有人有兴趣进一步研究这个，那么我会添加两个控制器Gists的链接，看看这是否是最好的方法。这些都是正在进行中的工作，并且根本没有被重新修改，而且在这一点上坦率地说是一团糟。有很多疯狂的过滤和排序正在进行中。

产品（家长）：https://gist.github.com/bennewton999/8257080

产品（儿童）：https://gist.github.com/bennewton999/8257058

Answer 1

好的，所以我周一早上带着新鲜的心情来到这里，并意识到我根本不需要一个不同的控制器。我刚刚更改了控制器，以便将产品控制器用于产品视图，就是这样。

使用angular ui在子范围之前加载父范围

1 个答案: