angularJS 模板化、指令或替代品的正确使用？

Question

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

这意味着这个 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}}.

指令甚至是正确的模板方法吗？如果是，我如何将数据从父作用域传递到指令，使它们保持同步并 update/re-render 在对象更改时使指令保持同步？

每次我想使用模板时都必须创建新的指令，这对我来说似乎很奇怪。

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>

angularJS 模板化、指令或替代品的正确使用？

angularJS templating, proper use of directives or alternatives?

javascript

templates

angularjs