Genuinely stop element from snapping - untie element - AngularJS

Question

I am trying to figure out how I can stop a DOM element from binding data from scope in angular.

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

So to speak, I have it

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

And I am changing the model so that the div is changing.

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

Then I press the button that unties it, so if I change the model to 'Welcome Universe' , I will not be the <div> the same as before. it

 <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 of any way to really unlock an element without cloning it and replacing the old one, iterating over attributes and .ect text.

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

Thus, by doing this, this should not affect the model or other elements that are attached to this model.

In short, Tell angular to leave the item permanently.

Answer 1

UPDATE

The way to do this is to create a new scope for an element with such a directive.

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

And apply it to your element like this:

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

Then, to undo this item from any updates, you will do it.

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

Done, here is a demo.

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

Thus, this creates a new region for the element and only works because all regions inherit all the data from their parent regions. therefore, the scope is basically the same as the parent scope, but allows you to destroy the scope without affecting the parent scope. Since this element was provided with its own scope when you destroy it, it does not return the parent scope like all other elements, if that makes sense 0.o

Everything below this line was my original answer, I will leave it here if someone prefers this method

---

I was able to achieve this with the unbindable directive. When you have an unbinable directive configured on an element, all that is required to untie 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 in this way.

 <h1 unbindable></h1> 

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

REF-1: Add the unbind true attribute to the element so that the directive will know which element you are disconnecting.

REF-2: Broadcast unbind event across all areas so that the directive knows that you want to decouple the element. Make sure you add the attribute first. --- Depending on your application layout, you may need to use $rootScope.$broadcast

REF-3 : when the unbind event is dispatched

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

REF-5 . Then destroy the scope specified by the directive. We should use setTimeout because I think angular is trying to do something after the $on event, and we get an error, so using setTimeout prevent this error. Although it works instantly.

This works with a few elements, here is a good demo.

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

Answer 2

I found this curious, so I joked a little. First I tried the "unbind ()" method, suggested in another answer, but which worked only with removing event handlers from this element, when what you are actually trying to do is remove the angular region from this element. There may be some hidden angular function to execute this function, but this is also very good:

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

This saves the model (and updates everything else that is bound to it), but removes the binding from the element. In addition, in your example above there is no binding for deletion, because you are not attached to any element, just display the inline model expression. My example shows this in action: http://jsfiddle.net/3jQMx/1/

Answer 3

You can call the unbind method, which stops listening for an element that has the ng-model attribute. See the script: http://jsfiddle.net/jexgF/

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

unbind removes all event listeners, so whenever changes occur, it does not listen to them and therefore does not go through an angular loop. I also suggested that you are not using jQuery, but if so, you can use a better selector than document.getElementById