Custom directive value with bindonce in Angularjs

Question

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">

That look right. You end up with two attributes, draggable and itemid, which have been evaluated draggable="Pants" itemid="m--Pi". What seems to be the problem? — hassassin
– hassassin, Commented Feb 6, 2014 at 1:59
Directives are not getting executed I think, I get no errors, but its not working. — Deepsy
– Deepsy, Commented Feb 6, 2014 at 2:24
Oh, draggable is a directive? In that case you should just be doing draggable="card.category" and in your directive you will $eval attrs.draggable and simply not set up a watch on it. — hassassin
– hassassin, Commented Feb 6, 2014 at 2:28

hassassin · Accepted Answer · 2014-02-06 16:38:20Z

2

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.

edited Feb 6, 2014 at 16:38

answered Feb 6, 2014 at 2:53

hassassin

5,0641 gold badge32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Deepsy Over a year ago

Just 1 more question, which solution do you think its better. If I make only 1 directive on the parent with $(document).("click", ".item-box", function()); or using this solution? because with this solution the directive will be executed hundred times or more.

hassassin Over a year ago

If you are trying to learn angular I suggest not falling back to jQuery, as it will be confusing later where the clicks are coming from. If all you are doing is a click bind, you should be using ng-click. The dom class search is probably the same efficiency as attaching an ng-click to each repeated element.

hassassin Over a year ago

Did you have more questions? If so, please ask, otherwise please mark as answered. Also, for the future, plnkr and jsfiddle are really great tools for sharing code here, as opposed to pictures of code.

Collectives™ on Stack Overflow

Custom directive value with bindonce in Angularjs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related