Angularjs 中带有 bindonce 的自定义指令值 [英] Custom directive value with bindonce in Angularjs
问题描述
我有一个包含数千个项目的 ng-repeat,所以我决定尝试 bindonce减少手表的数量.但我无法弄清楚如何正确使用它.所以现在我得到了以下代码:
<div class="item-box" draggable="{{card.category}}" itemId="{{card._id}}"><img ng-src="{{card.image}}" width="100%" height="100%">
当我在 bindonce doc 中读到时,我应该添加指令并使用 bo-* 指令,所以我想出了这个:
<div class="item-box" draggable="{{card.category}}" itemId="{{card._id}}"><img bo-src="card.image" width="100%" height="100%">
所以我的问题是如何使用 {{card.category}}
和 {{card._id}}
使用一次绑定?
bo-attr bo-attr-draggable="card.category" bo-attr-itemId="card._id"
似乎不起作用,我没有收到任何错误,只是什么也没发生.
结果看起来像
<div class="item-box ng-scope" bo-attr="" bo-attr-draggable="card.category" bo-attr-itemid="card._id" draggable="裤子" itemid="m--Pi">
bo-attr 实际上看起来不像您想要做的,您只需要一个指令来评估和绑定数据,而无需创建任何监视.我做了一个我认为是你想要的 plnkr:http://plnkr.co/edit/sFPAjlRCkDuXU5UiM1U1?p=预览
app.controller('MainCtrl', function($scope) {$scope.name = '世界';});//html<div 指令="名称"></div>//虚拟指令app.directive('directive', function() {返回 {模板:'<div bindonce bo-text="val"></div>',编译:函数(){返回 {前:功能(范围,elt,attrs){scope.val = scope.$eval(attrs.directive);}};}}})
不要手表!
如果我误解了什么,请告诉我.
I got a ng-repeat with thousands of item in it, so I decided to tryout bindonce to reduce the number of watches. But I couldn't figure out how to use it properly. So now I got the following code:
<div ng-repeat="card in cards">
<div class="item-box" draggable="{{card.category}}" itemId="{{card._id}}">
<img ng-src="{{card.image}}" width="100%" height="100%">
</div>
</div>
As I read in the bindonce doc, I should add the directive and use the bo-* directives, so I fugured out this:
<div ng-repeat="card in cards" bindonce>
<div class="item-box" draggable="{{card.category}}" itemId="{{card._id}}">
<img bo-src="card.image" width="100%" height="100%">
</div>
</div>
So my question is how I can also use {{card.category}}
and {{card._id}}
using bind-once?
bo-attr bo-attr-draggable="card.category" bo-attr-itemId="card._id"
seems not to work, I'm not getting any errors, just nothing happens.
Result looks like
<div class="item-box ng-scope" bo-attr="" bo-attr-draggable="card.category" bo-attr-itemid="card._id" draggable="Pants" itemid="m--Pi">
bo-attr doesn't actually seem like what you want to be doing, you just want a directive to evaluate and bind data without creating any watches. I made a plnkr that I think is what you want: http://plnkr.co/edit/sFPAjlRCkDuXU5UiM1U1?p=preview
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
// html
<div directive="name"></div>
// Dummy directive
app.directive('directive', function() {
return {
template: '<div bindonce bo-text="val"></div>',
compile: function() {
return {
pre: function(scope, elt, attrs) {
scope.val = scope.$eval(attrs.directive);
}
};
}
}
})
Woo no watches!
Let me know if I misunderstood something.
这篇关于Angularjs 中带有 bindonce 的自定义指令值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!