angularJS模板，正確使用指令或替代方法？

Question

在我的應用中，我像往常一樣有一個主控制器。 假設這是一家擁有不同產品的網上商店，我想比較X個產品。 顯示1個產品的HTML可重復用於所有其他比較的產品。

這意味着此HTML應該在模板中（這就是我在jQuery驅動的應用程序中使用Handlebars的地方）。

我創建了一個名為itemDetails.php的部分文件。

該模板需要插入我的視圖中-假設：-兩次使用不同的數據（通常是模型，但是在Angular中是范圍？）。

所以我嘗試了兩個指令，例如：

JavaScript的

myApp.directive('activeItem', function() {
    return {
        restrict: 'A',
        templateUrl: 'partials/itemDetails.php'
    };
});

myApp.directive('activeCompareItem', function() {
    return {
        restrict: 'A',
        templateUrl: 'partials/itemDetails.php'
    };
});

內部主視圖

<div class="product left" active-item>{{item.name}}</div>
<div class="product right" active-compare-item>{{item.name}}</div>

當然-這是行不通的，因為兩種產品的父作用域數據都相同。 所以我試圖隔離范圍：

myApp.directive('activeItem', function() {
    return {
        restrict: 'A',
        scope: {
            item: '@itemOne'
        },
        templateUrl: 'partials/itemDetails.php'
    };
});

myApp.directive('activeCompareItem', function() {
    return {
        restrict: 'A',
        scope: {
            item: '@itemTwo'
        },
        templateUrl: 'partials/itemDetails.php'
    };
});

但這也不起作用，因為顯然我現在只能將“ item”用作HTML屬性，而不能用作表達式{{item.name}} 。

指令甚至是正確的模板制作方法嗎？ 如果是，如何將數據從父作用域傳遞到指令，使它們保持同步並在對象更改時更新/重新渲染指令？

對於我來說，每次使用模板都必須創建新的指令對我來說似乎很奇怪。

Answer 1

指令聲明：

myApp.directive('activeItem', function() {
    return {
        restrict: 'A',
        scope: {
            item: '=data' //use "data" attribute to add the different data into the directive.
        },
        templateUrl: 'partials/itemDetails.php'
    };
});

與其他數據一起使用

<div class="product left" active-item data="itemOne">{{item.name}}</div>
<div class="product right" active-item data="itemTwo">{{item.name}}</div>