Genuinely остановка элемента из привязки - развязать элемент - AngularJS

Question

Я пытаюсь выяснить, как я могу остановить DOM элемент из данных привязки из области в угловой.

Я знаю, что вы можете сделать это с помощью утверждений и всего, но существует ли подлинный & постоянный способ остановить привязку элемента в угловом, но сохранить добавленный контент?

Так сказать, у меня есть этот

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

И я изменить модель таким образом, чтобы изменения дел до этого.

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

Затем я нажимаю кнопку, которая будет синхронизироваться, поэтому, если я изменить модель для 'Welcome Universe', я wan't в <div> быть таким же, как и раньше. Это

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

Я знаю, что есть много других способов сделать это, но я не знаю, какой-либо способ действительно синхронизироваться элементом, без клонирования и замен старого зацикливания через атрибуты и text..ect

Демо вещь: http://jsfiddle.net/a9tZY/

Таким образом, делая это, он не должен влиять на модель или другие элементы, которые являются обязательными для этой модели.

Короткий рассказ, Скажите Угловой, чтобы оставить элемент навсегда.

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/

Таким образом, это создает новую область на элементе и работает только потому, что все прицелы наследуют все данные из их родительских областей. поэтому область действия в основном такая же, как и родительская область, но позволяет уничтожить область действия, не затрагивая родительскую область. Поскольку этот элемент получил свою собственную сферу, когда вы уничтожите его не получить родительскую сферу назад, как и все другие элементы, если это имеет смысл 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 элемент будет UNBIND-эд

REF-1: Добавьте UNBIND истинный атрибут элемента, так что директива знает, какой элемент вы отключаете.

REF-2: Передача события unbind по всем областям, чтобы директива знала, что вы хотите развязать элемент. Убедитесь, что вы сначала добавили атрибут. --- В зависимости от макета приложения, вам может понадобиться использовать $rootScope.$broadcast

REF-3: Когда отвязать событие транслируется

REF-4: Если элемент, связанный с директивой имеет true unbind

REF-5: Затем уничтожить область действия, указанную в директиве. Мы должны использовать setTimeout, потому что я думаю, что угловой пытается что-то сделать после события $on, и мы получаем ошибку, поэтому использование setTimeout предотвратит эту ошибку.Хотя он срабатывает мгновенно.

Это работает с несколькими элементами, вот хорошая демонстрация.

Демо: http://jsfiddle.net/wzAXu/2/

Answer 2

Вы можете вызвать метод unbind, который перестает прослушивать элемент, в котором присутствует атрибут ng-model. См скрипки: http://jsfiddle.net/jexgF/

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

отвязать удаляет все обработчик событий, так что всякий раз, когда какие-либо изменения, он не будет слушать тех, и, следовательно, не проходит через угловую петлю. Я также предположил, что вы не используете jQuery, но если это так, вы можете использовать лучший селектор, чем document.getElementById

Answer 3

Мне это показалось любопытным, поэтому я немного пошутил. Сначала я попробовал метод «unbind()», предложенный в другом ответе, но который работал только с удалением обработчиков событий из элемента, когда то, что вы на самом деле пытаетесь сделать, - это удалить угловую область из элемента. Там может быть некоторые аккуратнее скрытые функции в Угловом, чтобы сделать это, но это работает просто отлично тоже:

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

Это сохраняет модель (и обновляет все остальное по-прежнему привязан к нему), но удаляет привязку из элемента. Кроме того, в вашем примере выше нет привязки для удаления, потому что вы не привязываетесь ни к какому элементу, просто отображаете выражение модели inline. Мой пример показывает, что это в действии: http://jsfiddle.net/3jQMx/1/