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>