18

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

我知道您可以使用 if 语句和所有语句来执行此操作，但是是否有一种真正永久的方法来停止以角度绑定元素但保留添加的内容？

所以说我有这个

<div ng-bind=​"content" class=​"ng-binding">​Welcome​&lt;/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 永远不要管这个元素。

4

3 回答 3

19

更新

这样做的方法是使用这样的指令在元素上创建一个新范围。

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

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

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

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

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

完成，这是一个演示。

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

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

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

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：在范围内广播 unbind 事件，以便指令知道您要取消绑定元素 - 确保首先添加属性。--- 根据您的应用布局，您可能需要使用$rootScope.$broadcast

REF-3 : 解绑事件广播时

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

REF-5 : 然后销毁该指令的作用域。我们必须使用setTimeout，因为我认为 angular 会在事件发生后尝试做某事$on并且我们得到一个错误，所以使用setTimeout将防止该错误。尽管它会立即开火。

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

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

于 2013-08-15T17:16:36.280 回答
3

这个让我很好奇，所以我做了一些探索。起初，我尝试了另一个答案中建议的“unbind()”方法，但这仅适用于从元素中删除事件处理程序时，您实际上想要做的是从元素中删除角度范围。Angular 中可能有一些更简洁的隐藏函数可以做到这一点，但这也很好用：

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

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

于 2013-08-15T04:31:56.027 回答
1

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

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

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

于 2013-08-14T19:38:46.663 回答