爲什麼Angular（1.5）組件總是有一個孤立的範圍？

Question

我正在構建一個Angular庫，它提供了一堆組件，這些組件可以更容易地在特定的API之上構建SPA應用程序。對於某些組件，我們正在使用多插槽轉換功能。多槽插件和組件在AngularJS 1.5版本中引入。

我真的很喜歡這兩個功能，但我不明白爲什麼組件總是有一個孤立的範圍。我想控制如何在我的transcluded模板中訪問變量。但現在我不能，因爲我無法控制範圍。這基本上意味着我必須告訴我的庫的用戶首先引用父範圍，以便獲取他們所需的數據。

有誰知道解決方法？或者我做錯了。那麼請告訴我:-)

所以這是我的組件：

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> 

，這是它如何被使用。你看到我的問題。表達式必須以$父母開頭。 $ 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