在Angularjs bindonce自定义指令值 [英] Custom directive value with bindonce in Angularjs

问题描述

我得到了NG-重复数千项的，所以我决定试训 bindonce 以降低手表的数量。但我无法弄清楚如何正确使用它。
所以，现在我得到了以下code：

 ＆LT; D​​IV NG重复=牌牌＆GT;
    ＆LT; D​​IV CLASS =项目箱拖动={{card.category}}的itemId ={{card._id}}＆GT;
       ＆LT; IMG NG-SRC ={{card.image}}WIDTH =100％HEIGHT =100％＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

我在 bindonce文档阅读，我要补充的指令，并使用气孔与*指令，所以我fugured出这​​个：

 ＆LT; D​​IV NG重复=牌牌bindonce＆GT;
    ＆LT; D​​IV CLASS =项目箱拖动={{card.category}}的itemId ={{card._id}}＆GT;
       ＆LT; IMG博SRC =card.imageWIDTH =100％HEIGHT =100％＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

所以我的问题是我怎么也可以使用 {{} card.category} 和 {{} card._id} 绑定一次使用？

  BO-ATTR博ATTR-拖动=card.category博ATTR-的itemId =card._id
 

似乎没有工作，我没有得到任何错误，只是什么都不会发生。

结果看起来像

 ＆LT; D​​IV CLASS =项盒纳克范围的博ATTR =博ATTR-拖动=card.category博ATTR-itemid的=牌._id拖动=牛仔裤的夏天为itemid =米 - 皮＆GT;
 

解决方案

博ATTR实际上并没有看起来像你想干什么，你只想要一个指令，评估和不会造成任何的手表数据绑定。我提出，我觉得plnkr是你想要什么： http://plnkr.co/编辑/ sFPAjlRCkDuXU5UiM1U1？p = preVIEW

  app.controller（'MainCtrl'，函数（$范围）{
  $ scope.name ='世界';
 }）;// HTML
＆LT; D​​IV指令=名与GT;＆LT; / DIV＆GT;
//虚拟指令
app.directive（'指令'，函数（）{
  返回{
    模板：'＆LT; D​​IV bindonce博文=VAL＆GT;＆LT; / DIV＆GT;，
    编译：功能（）{
      返回{
        pre：功能（范围，ELT，ATTRS）{
          。scope.val = $范围的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屋！