真正阻止元素绑定-取消绑定元素-AngularJS

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

本文关键字：绑定 元素 取消 -AngularJS      更新时间：2023-09-26

我正试图找出如何阻止DOM元素绑定angular范围中的数据。

我知道你可以用if语句和所有的东西来做这件事，但有一个真正的&停止按角度绑定元素，但保留添加的内容的永久方法？

假设我有这个

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

我改变了模型，使div变成这样。

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

然后我单击将解除绑定的按钮，所以如果我将模型更改为'Welcome Universe'，我不希望<div>与以前相同。这个

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

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

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

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

长话短说，告诉Angular永远不要理会元素。

更新

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

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

并将其应用于您的元素，如

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

然后，要从任何更新中解除此元素的绑定，请执行此操作。

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

完成，这是一个演示。

演示：http://jsfiddle.net/KQD6H/

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

这行下面的所有内容都是我最初的答案，如果有人喜欢这种方式，我会把它留在这里

我通过unbindable指令真正做到了这一点。当您在元素上设置了unbinable指令时，解除元素绑定所需的全部内容如下。

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

这是指令。

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
                }
            });
        }
    }
});

然后你就这样设置你的元素。

<h1 unbindable></h1>

因此，无论何时将unbind="true"属性添加到h1并广播unbind，元素都将被解除绑定

REF-1:将unbind true属性添加到元素中，以便指令知道您正在解除绑定的元素。

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

REF-3：当广播解除绑定事件时，

REF-4：如果与指令关联的元素具有真正的解除绑定属性

REF-5：然后销毁指令所产生的作用域。我们必须使用setTimeout，因为我认为angular试图在$on事件之后做一些事情，但我们得到了一个错误，所以使用setTimeout将防止该错误。尽管它会立即开火。

这适用于多个元素，这里有一个很好的演示。

演示：http://jsfiddle.net/wzAXu/2/

这个让我很好奇，所以我四处打听了一下。起初，我尝试了另一个答案中建议的"unbind（）"方法，但只有在实际尝试从元素中删除角度范围时，该方法才能从元素中移除事件处理程序。Angular中可能有一些更整洁的隐藏函数可以做到这一点，但这也很好：

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

这将保留模型（并更新仍绑定到它的任何其他内容），但从元素中删除绑定。此外，在上面的示例中，没有要删除的绑定，因为您没有绑定到任何元素，只是内联显示模型表达式。我的例子说明了这一点：http://jsfiddle.net/3jQMx/1/

您可以调用unbind方法，该方法将停止侦听存在ng模型属性的元素。参见小提琴：http://jsfiddle.net/jexgF/

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

unbind会删除所有事件侦听器，因此无论何时进行任何更改，它都不会侦听这些更改，因此不会经过角度循环。我还假设您没有使用jQuery，但如果您使用了，您可以使用比document.getElementById 更好的选择器

相关文章：