真正阻止元素绑定-取消绑定元素-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/

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

长话短说，告诉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.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 ：如果与指令关联的元素具有真正的取消绑定属性

REF-5
：然后销毁该指令的作用域。我们必须使用，setTimeout因为我认为angular在$on事件发生后会尝试执行某些操作，并且会收到错误消息，因此使用此命令setTimeout可以防止发生该错误。虽然会立即触发。

这适用于多个元素，这是一个不错的演示。

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