Using a bindOnce directive with $http

Question

I want to use the following bindOnce directive:

.directive('bindOnce', function() {
    return {
        scope: true,
        link: function( $scope, $element ) {
            setTimeout(function() {
                $scope.$destroy();
                $element.removeClass('ng-binding ng-scope');
            }, 0);
        }
    }
});

If I use this on a simple piece of html like so:

<span class="highlight" data-bind-once> "{{listing.searchTerm}}"</span>

What happens is that there is nothing but the "" being displayed!

I am loading my data using the $http service, I think the bind-once must get removed before I have loaded my data and then it obviously doesn't get bound.

I want to use this in many places in my app, is this a limitation or am I doing this incorrectly?

Answer 1

The newer versions of angular have the ability to bind once within them:

<span class="highlight"> "{{ ::listing.searchTerm }}"</span>

Link: https://docs.angularjs.org/guide/expression#one-time-binding