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

Question

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

我知道你可以使用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>?

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

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

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

长话短说,Tell Angular永远留下元素.

Answer 1

UPDATE

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

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:广播unbind事件时

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

REF-5:然后销毁指令所作的范围.我们必须使用setTimeout因为我认为angular尝试在$on事件之后做某事并且我们得到错误,因此使用setTimeout将防止该错误.虽然它瞬间发射.

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

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