javascript - angularJS 模板，正确使用指令或替代方案？

Question

在我的应用程序中，我像往常一样有一个主 Controller 。假设这是一个拥有不同产品的网上商店，我想比较 X 个产品。显示 1 个产品的 HTML 可重复用于所有其他进行比较的产品。

这意味着该 HTML 应该位于模板中(这是我在 jQuery 驱动的应用程序中使用 Handlebars 的地方)。

我创建了一个名为 itemDetails.php 的部分。

这个模板需要插入到我的 View 中 - 比方说: - 使用不同的数据两次(通常是模型，但在 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>