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>

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

1 个答案: