Question

我正在构建一个Angular库，它提供了一系列组件，可以更轻松地在某个API之上构建SPA应用程序。对于某些组件，我们使用多插槽转换功能。 AngularJS 1.5版本中引入了多插槽转换和组件。

我非常喜欢这两个功能，但我不明白为什么组件总是有一个孤立的范围。我想控制变换模板中可以访问变量的方式。但现在我不能，因为我无法控制范围。这基本上意味着我必须告诉我的库用户首先引用父作用域以获取他们需要的数据。

有没有人知道解决方法？或者我做错了。那请告诉我： - ）

所以这是我的组成部分：

export const ProductsListComponent =
{
    transclude: {
        'template' : '?productListItemTemplate'
    },
    templateUrl: 'app/components/products-list/products-list.html',
    controller: ProductsListComponentController,
    bindings: {
        list: '='
    }
}

... 

angular.module('MyWebApplication', ['ngMessages', 'ui.router' ])
    .component( 'productList', ProductsListComponent )  

...

这是模板HTML：

<div class="product-list-wrapper" ng-repeat="$product in $ctrl.list">
    <ng-transclude ng-transclude="template">
        <product-list-item product="$product"></product-list-item>
    </ng-transclude>
</div>

这就是它的使用方法。你看到了我的问题。表达式必须以 $ parent。 $ product.title开头，因为组件范围已包含。

<product-list list="search.products">
    <product-list-item-template>
       <h2>{{$parent.$product.title}}</h2>
    </product-list-item-template>
</product-list>

Answer 1

简单的答案是，在可维护性和可重用性方面，使用父作用域是一个问题。

Angular 2提升了组件模式，这需要使所有外部依赖项都显式化。角度1分量函数是构建应用程序以便更容易地迁移到角度2的方法。

如果您对有关原因的详细信息感兴趣，可以参考此帖子：http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html#replace-ng-controller-with-component-directive

为什么Angular（1.5）组件总是具有隔离范围？

1 个答案: