Javascript 真正阻止元素绑定-解除元素绑定-AngularJS

我试图找出如何阻止DOM元素从angular中的作用域绑定数据

我知道您可以使用if语句和所有语句来实现这一点，但是是否有一种真正的、永久的方法来停止绑定元素，但保留添加的内容

所以说我有这个

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

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

演示内容：

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

---

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

您可以调用unbind方法，停止侦听存在ng模型属性的元素。参见小提琴：

---

取消绑定将删除所有事件侦听器，因此无论何时进行任何更改，它都不会侦听这些事件侦听器，因此不会通过角度循环。我还假设您没有使用jQuery，但如果您使用，您可以使用比document更好的选择器。getElementById这一个让我好奇，所以我做了一些探索。起初，我尝试了另一个答案中建议的“unbind（）”方法，但这只适用于从元素中删除事件处理程序，而实际上您要做的是从元素中删除角度范围。在Angular中可能有一些更简洁的隐藏函数来实现这一点，但这也很好：

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

---

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

实现这一点的方法是使用如下指令在元素上创建一个新范围

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

然后像这样把它应用到你的元素上

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

完成，这里有一个演示

演示：

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

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

---

我通过

不可绑定的

指令真正做到了这一点。 当您在元素上设置了

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：如果与指令关联的元素具有真正的unbind属性

REF-5：然后销毁指令规定的范围。我们必须使用

setTimeout

，因为我认为angular在

$on

事件后尝试执行某些操作，我们会得到一个错误，因此使用

setTimeout

将防止该错误。尽管它能立即开火

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

---

演示：

这个用例是什么？我实际上使用的是

ng样式

，我不想停止绑定某些元素，而是继续绑定其他元素，我使用了一个简单的文本示例，这样更容易理解，但总体结果将停止与该元素的任何绑定。这篇文章可能很有用：这很有趣，因为范围中有一个

$$watchers

对象包含所有的watchers，您可以通过这种方式解除绑定，但我找不到一种方法来确定watcher是哪个，@Sharondio感谢链接，同样的问题，但不是我想要的。我真的希望这是可能的。我不想删除此元素上的绑定

完成后阻止我：

不是模型不确定它为什么被否决，我确实尝试解决了问题，从接受的答案来看，似乎有些帮助。我知道这肯定是一条路要走，但它解除了对所有人的约束。现在我真的很好奇。必须有一个简单的方法来做到这一点。是时候深入研究角度源了……这很好。所以你需要指令来创建元素范围？这很奇怪，因为元素原型包括.scope（）。您可能会认为元素范围在那里，而指令只是抓住了它。但是它可能需要指令来公开它。@Sharondio我想您会发现，使用指令scope:true，它会为元素创建一个新的作用域，但作用域无论如何都会从父作用域继承，因此新的作用域仍然会继承父作用域数据，但是当您删除该作用域时，您正在删除新的作用域，因此该元素不再属于任何作用域，如果这有意义的话？注意，这在生产中不起作用。禁用调试信息（

$compileProvider.debugInfoEnabled（true）

）时，

.scope（）

和

.isolateScope（）

将不起作用。

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

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>