javascript - How to use bindonce directive in ng-grid? - Stack Overflow

admin管理员组

文章数量:1295274

I am having a serious performance issue in my application. I am using angular and ng-grid. After some reading for why my app is slow, I was directed to use bindonce directive to overe potential Angular performance issues.

So I added bindonce.js in my solution and injected the directive in my module

HomeIndexModule = angular.module("HomeIndexModule", ['ngGrid', 'pasvaz.bindonce']);

and I am using as below in markup

<div class="gridStyle " bindonce data-ng-grid="gridOptions"></div>

I am not sure whether this is actually unbinding the grid.

Question 1: Has anyone undergone the process could direct me how to do this as I could find examples only for ng-repeat in the bindonce website.

Question 2: how to verify whether the bindonce is actually working?

I am having a serious performance issue in my application. I am using angular and ng-grid. After some reading for why my app is slow, I was directed to use bindonce directive to overe potential Angular performance issues.

So I added bindonce.js in my solution and injected the directive in my module

HomeIndexModule = angular.module("HomeIndexModule", ['ngGrid', 'pasvaz.bindonce']);

and I am using as below in markup

<div class="gridStyle " bindonce data-ng-grid="gridOptions"></div>

I am not sure whether this is actually unbinding the grid.

Question 1: Has anyone undergone the process could direct me how to do this as I could find examples only for ng-repeat in the bindonce website.

Question 2: how to verify whether the bindonce is actually working?

• javascript
• performance
• angularjs
• angularjs-directive
• ng-grid

Share Improve this question Follow asked Oct 25, 2013 at 18:22 Ajax3.14Ajax3.14 1,69555 gold badges2424 silver badges4242 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I have mentioned this twice in other posts, I have created my own bind-once directive that is tiny and does a perfect job, personally i think the plugin is OVER-COMPLICATING things.

Check this out

app.directive('bindOnce', function() {
    return {
        scope: true,
        link: function( $scope ) {
            setTimeout(function() {
                $scope.$destroy();
            }, 0);
        }
    };
});

<div class="gridStyle" bind-once ng-grid="gridOptions"></div>

Demo: http://plnkr.co/edit/4cBOEG?p=preview

Similar Post:

Genuinely stop a element from binding - unbind an element - AngularJS

This change fixed the performance lag, the change is menting out the self.resizeOnData() in ng-grid.js line number 1420.

$scope.$on("ngGridEventData", function () {
//self.resizeOnData(temp);

Chrome event pro-filer showed this method being called too many times and looks like it is re sizing all the cells in the grid on change of data-source. I am still testing to find the side effects but till now all the previous functionalities are working and the performance was increase 5X than my previous one.

if you see this change break any thing else let me know

You should read the documentation thoroughly. Using just bindonce won't give you the effect you want. Look at this example I've created: http://plnkr.co/edit/GXkLWfFpfdJvPVyRMtpO - $timeout is used to call $apply every second. Two elements have bindings to the same functions which logs to console the text passed as a parameter. As you can see, using just bindonce doesn't work - the just bindonce text is still being logged, whilst with bo-text appears only once. One of bo-text, bo-html etc. must be used to achieve binding only once.

So, in your case, you need to modify templates of the ngGrid directive and replace every normal binding you want with bo-* directives. Here: How to render html formatted text in ng-grid column header I've explained how to do that.

本文标签： javascriptHow to use bindonce directive in nggridStack Overflow