Question

我试图找出如何阻止 DOM 元素绑定来自范围内的数据。

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

所以说我有这个

<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>

我知道还有很多其他方法可以做到这一点，但是我不知道如何真正解开元素，没有克隆它并替换旧的循环遍历属性和text..ect

演示用品：http://jsfiddle.net/a9tZY/

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

长话短说，Tell Angular将元素永远留下。

Answer 1

<强>更新

执行此操作的方法是使用类似指令在元素上创建新范围。

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

并将其应用于您的元素

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

然后从任何更新中取消绑定此元素。

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

完成，这是一个演示。

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

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

这一行以下的所有内容都是我原来的答案，我会留在这里，因为有人喜欢这种方式

我已经设法通过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/

Answer 2

这个让我很好奇，所以我做了一些探讨。起初我尝试了另一个答案中建议的“unbind（）”方法，但这只适用于从元素中删除事件处理程序，而实际上你要做的就是从元素中删除角度范围。在Angular中可能有一些更好的隐藏功能来做到这一点，但这也很好用：

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

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

Answer 3

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

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

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

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

3 个答案: