真正停止绑定元素 - 取消绑定元素 - AngularJS [英] Genuinely stop a element from binding - unbind an element - AngularJS

问题描述

我试图找出如何阻止 DOM 元素从 angular 范围内绑定数据.

我知道你可以用 if 语句和所有语句来做到这一点，但是有没有真正的 &停止以角度绑定元素但保留添加的内容的永久方法?

所以说我有这个

 欢迎 </div>

我改变了模型，使 div 变成了这个.

 欢迎世界

然后我单击将解除绑定的按钮，因此如果我将模型更改为 'Welcome Universe'，我不希望

成为和以前一样.这个

 欢迎世界

我知道有很多其他方法可以做到这一点，但我不知道有什么方法可以真正解除元素的绑定，而不是克隆它并替换旧元素循环遍历属性和文本..ect

演示内容:http://jsfiddle.net/a9tZY/

因此，通过这样做，它不应该影响绑定到该模型的模型或其他元素.

长话短说，告诉 Angular 永远不要管这个元素.

解决方案

UPDATE

这样做的方法是使用这样的指令在元素上创建一个新的作用域.

yourModule.directive('unbindable', function(){返回{范围:真}；});

并像这样将其应用于您的元素

然后解除此元素与您执行此操作的任何更新的绑定.

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

完成，这是一个演示.

演示:http://jsfiddle.net/KQD6H/<块引用>

因此，这会在元素上创建一个新的作用域，并且仅在所有作用域继承其父作用域的所有数据时才起作用.所以作用域与父作用域基本相同，但允许您在不影响父作用域的情况下销毁作用域.因为这个元素被赋予了它自己的作用域，所以当你销毁它时，它不会像所有其他元素一样恢复父作用域，如果这有意义的话 0.o

这行下面的所有内容都是我的原始答案，我会把它留在这里以防有人喜欢这种方式

---

我已经使用 unbindable 指令真正做到了这一点.当您在元素上设置了 unbinable 指令后，解除元素绑定所需的一切就是这样.

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

这是指令.

app.directive('unbindable', function(){返回 {scope: true,//这就是让我们变魔术的原因.控制器:函数($scope，$element){$scope.$on('unbind', function(){//Ref 3if($element.attr('unbind') === 'true'){//Ref 4window.setTimeout(function(){ $scope.$destroy() }, 0);//Ref 5}});}}});

然后像这样设置元素.

因此，每当您将 unbind="true" 属性添加到 h1 并广播 unbind 时，元素将被取消绑定

<块引用>

REF-1:向元素添加 unbind true 属性，以便指令知道您要取消绑定的元素.

REF-2: 跨范围广播取消绑定事件，以便指令知道您要取消绑定元素 - 确保先添加属性.--- 根据您的应用布局，您可能需要使用 $rootScope.$broadcast

REF-3:广播解除绑定事件时

REF-4:如果与指令关联的元素具有真正的 unbind 属性

REF-5:然后销毁指令创建的作用域.我们必须使用 setTimeout 因为我认为 angular 试图在 $on 事件之后做一些事情并且我们得到一个错误，所以使用 setTimeout 将阻止那个错误.虽然它会立即触发.

这适用于多个元素，这是一个很好的演示.

演示:http://jsfiddle.net/wzAXu/2/强>

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.

解决方案

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/

这篇关于真正停止绑定元素 - 取消绑定元素 - AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！