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

Question

I'm trying to find out how I can stop a DOM element from binding data from the scope in angular.

I know that you could do this with if statements and all, but is there a genuine & permanent way to stop binding a element in angular but keep the content that was added?

So say i have this

<div ng-bind=​"content" class=​"ng-binding">​Welcome​</div>​

And i change the model so that the div changes to this.

<div ng-bind=​"content" class=​"ng-binding">​Welcome​ World</div>​

Then I click the button that will unbind it, so if I change the model to 'Welcome Universe', I wan't the <div> to be the same as before. This

<div ng-bind=​"content" class=​"ng-binding">​Welcome​ World</div>​

I know there are many other ways to do this, but i don't know any way to genuinely unbind the element, without cloning it and replacing the old one looping through the attributes and text..ect

Demo thing: http://jsfiddle.net/a9tZY/

So, by doing this, it shouldn't affect the model or other elements that are binding to that model.

Long story short, Tell Angular to leave the element alone forever.

Scharf

What's the use case for this? – Jecho

I'm actually using ng-style and I wan't to stop binding on certain elements but continue binding on other elements, I used a simple text example so it's easier to understand, but the overall result will stop anything binding to that element. – Scharf

This post might be useful: #13652078 – Bandler

This is interesting because there is a $$watchers object in the scope which holds all of the watchers and you could unbind it that way, but I can't find a way to identify what watcher is which, @Bandler thanks for link, same sort of question, but not what I'm looking for. – Scharf

I really hope that this is possible – Scharf

With angular 1.3 you get {{::text }} syntax which does extactly that – Pervert

Answer 1

UPDATE

The way to do this is to create a new scope on the element with a directive like so.

yourModule.directive('unbindable', function(){
    return { scope: true };
});

And apply it to your element like so

<div unbindable id="yourId"></div>

Then to unbind this element from any updates you do this.

angular.element( document.getElementById('yourId') ).scope().$destroy();

Done, here's a demo.

Demo: http://jsfiddle.net/KQD6H/

So this creates a new scope on the element and only works because all scopes inherit all data from their parent scopes. so the scope is basically the same as the parent scope, but allows you to destroy the scope without affecting the parent scope. Because this element was given it's own scope, when you destroy it it doesn't get the parent scope back like all of the other elements, if that makes sense 0.o

Everything below this line was my original answer,I'll leave it here incase someone prefers this way

---

I have managed to achieve this genuinely with a unbindable directive. When you have the unbinable directive set up on the element all that is required to unbind the element is this.

yourElement.attr('unbind', 'true'); // Ref 1
$scope.$broadcast('unbind'); // Ref 2

Here is the directive.

app.directive('unbindable', function(){
    return {
        scope: true, // This is what lets us do the magic.
        controller: function( $scope, $element){ 
            $scope.$on('unbind', function(){ // Ref 3
                if($element.attr('unbind') === 'true'){ // Ref 4
                    window.setTimeout(function(){ $scope.$destroy() }, 0);//Ref 5
                }
            });
        }
    }
});

and you set your element up like this.

<h1 unbindable></h1>

So whenever you add the unbind="true" attribute to the h1 and broadcast unbind the element will be unbind-ed

REF-1: Add the unbind true attribute to the element so that the directive knows what element you are unbinding.

REF-2: Broadcast the unbind event across the scopes so that the directive knows that you want to unbind a element - Make sure you add the attribute first. --- Depending on your app layout, you might need to use $rootScope.$broadcast

REF-3: When the unbind event is broadcasted

REF-4: If the element associated with the directive has a true unbind attribute

REF-5: Then destroy the scope made by the directive. We have to use setTimeout because I think angular tries to do something after the $on event and we get a error, so using setTimeout will prevent that error. Although it fires instantly.

This works on multiple elements, here is a nice demo.

Demo: http://jsfiddle.net/wzAXu/2/

Scharf

That is pretty sweet. – Bandler

so you need the directive to create the element scope? – Bandler

It is weird because the element prototype includes .scope(). You'd think that the element scope was there regardless and the directive just grabs it. But maybe it requires the directive to expose it. – Bandler

@Bandler I think you will find that with the directive scope: true, it creates a new scope for the element, but the scopes inherit from the parent scopes anyway so the new scope still inherits the parent scope data, but when you remove the scope, you are removing the new scope and therefore that element no longer belongs in any scope, if that makes sense? – Scharf

Beware, that's not gonna work in production. When you disable debug info ($compileProvider.debugInfoEnabled(true)), the .scope() and .isolateScope() won't work. – Copy

@Scharf How would you re-bind the values? Is it possible? – Possessed

Answer 2

This one got me curious, so I did some poking around. At first I tried the "unbind()" method suggested in the other answer, but that only worked with removing event handlers from the element when what you're actually trying to do is remove the angular scope from the element. There may be some neater hidden function in Angular to do this, but this works just fine too:

angular.element(document.getElementById('txtElem')).scope().$destroy();

This retains the model (and updates anything else still bound to it), but removes the binding from the element. Also, in your example above, there is no binding to remove because you aren't binding to any element, just displaying the model expression inline. My example shows this in action: http://jsfiddle.net/3jQMx/1/

Bandler

I know this is definitely the way to go, but it removes binding on all. jsfiddle.net/3jQMx/2 – Scharf

Now I'm really curious. There has to be a simple way of doing this. Time to dig into the angular source.... – Bandler

Answer 3

You can call the unbind method that stops listening to the element where the ng-model attribute is present. See fiddle: http://jsfiddle.net/jexgF/

angular.element(document.getElementById('txtElem')).unbind()

unbind removes all event listeners, so whenever any changes are made, it wont listen for those and hence not go through the angular loop. I have also assumed that you are not using jQuery, but if you are, you can use a better selector than document.getElementById

Connate

I wan't to remove the binding on this element Stop me when your done: not the model – Scharf

not sure why it is downvoted, i did try to solve the problem and from the accepted answer, looks like was helpful somewhat. – Connate