javascript - 定義済みの条件に基づいて HTML コンポーネントを ng-repeat にバインドする方法

Question

私はAngularJSを初めて使用します。アプリ全体で再利用される html コンポーネントを作成しました。このコンポーネントが製品の基本情報を提供するとしましょう。HTML の基本構造は次のとおりです。

<div class="visible-sm-block">
    <div class="row">
        <div class="col-sm-2">
            <img class="img-circle img-responsive" alt="Image of product"
                 ng-src="{{}}"/>
        </div>
        <div class="col-sm-10">
            <label>{{ProductName}}</label>
            <p>{{CompanyName}}</p>
            <p>{{ShippedTo}}</p>
        </div>
    </div>
</div>

product.js ファイルは次のようになります。

(function() {
    'use strict';

    angular
        .module('product')
        .directive('productDetails', productDetails);

    /** @ngInject */
    function productDetails() {
        var directive = {
            restrict: 'E',
            templateUrl: 'app/components/productDetails/productDetails.html'
        };
        return directive;
    }

})();

小さな HTML コンポーネントは、次のようにアプリ内の他の HTML ページで再利用されます。

<product-details></product-details>

問題は、HTML コンポーネントをページ全体で使用するときに、データを HTML コンポーネントにバインドできないことです。これらのページのコントローラーは別のフォルダーにあります: app/productshipping/productshipping.controller.js HTML コンポーネント自体で ng-controller="controller_name" を使用してみましたが、結果は得られませんでした。：（ 助けてください。