javascript - 真正阻止元素绑定(bind) - 取消绑定(bind)元素 - AngularJS

Question

我正在尝试找出如何阻止 DOM 元素从 Angular 范围内绑定(bind)数据。

我知道您可以使用 if 语句和所有语句来做到这一点，但是是否有一种真正且永久的方法来停止以 Angular 绑定(bind)元素但保留添加的内容？

所以说我有这个

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

然后我更改了模型，使 div 更改为此。

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

然后我单击将解除绑定(bind)的按钮，所以如果我将模型更改为 'Welcome Universe' , 我不想 <div>和以前一样。这个

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

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

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

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

长话短说，告诉 Angular 永远不要管这个元素。

Answer 1

更新

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

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

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

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

然后将此元素与您执行此操作的任何更新解除绑定(bind)。

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

完成，这是一个演示。

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

So this creates a new scope on the element and only works because all scopes inherit all data from their parent scopes. so the scope is basically the same as the parent scope, but allows you to destroy the scope without affecting the parent scope. Because this element was given it's own scope, when you destroy it it doesn't get the parent scope back like all of the other elements, if that makes sense 0.o

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

---

我已经成功地通过 unbindable 指令实现了这一点。当您在元素上设置了 unbinable 指令时，取消绑定(bind)元素所需的全部就是这个。

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 时，该元素将被解除绑定(bind)

REF-1: Add the unbind true attribute to the element so that the directive knows what element you are unbinding.

REF-2: Broadcast the unbind event across the scopes so that the directive knows that you want to unbind a element - Make sure you add the attribute first. --- Depending on your app layout, you might need to use $rootScope.$broadcast

REF-3: When the unbind event is broadcasted

REF-4: If the element associated with the directive has a true unbind attribute

REF-5: Then destroy the scope made by the directive. We have to use setTimeout because I think angular tries to do something after the $on event and we get a error, so using setTimeout will prevent that error. Although it fires instantly.

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

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