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

在我的应用程序中，我有一个像往常一样的主控制器。假设这是一家网店，有不同的产品，我想比较X产品。显示1种产品的HTML可重复用于所有其他比较产品。angularJS模板，正确使用指令或替代？

这意味着这个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' 
    }; 
});

但是，这并不工作，要么因为很明显我可以用“商品”只是作为一个HTML属性现在，而不是作为一种表达{{item.name}}。

指令甚至是正确的模板方法吗？如果是的话，我怎样才能将数据从父范围传递给一个指令，保持它们同步并在对象发生变化时更新/重新呈现指令？

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

来源

2015-01-12 ProblemsOfSumit

指令声明：

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>

来源

2015-01-12 14:27:44 Blaise

圣香蕉真棒使用它！谢谢！ – ProblemsOfSumit

我想这就是你需要的。希望能帮助到你。 – Blaise

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

回答

相关问题