javascript - directivas - ng-if

Detener genuinamente a un elemento para que no se vincule-desvincular un elemento-AngularJS

Question

Estoy intentando descubrir cómo puedo evitar que un elemento DOM vincule los datos del ámbito en angular.

Sé que podrías hacer esto con declaraciones de if y todo, pero ¿existe una forma genuina y permanente de dejar de vincular un elemento en angular pero mantener el contenido que se agregó?

Entonces digo que tengo esto

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

Y cambio el modelo para que el div cambie a esto.

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

Luego hago clic en el botón que lo desvinculará, así que si cambio el modelo a ''Welcome Universe'' , quiero que el <div> sea ​​el mismo que antes. Esta

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

Sé que hay muchas otras maneras de hacerlo, pero no conozco ninguna forma de desvincular realmente el elemento, sin clonarlo y reemplazar el viejo que pasa por los atributos y el texto.

Demo: http://jsfiddle.net/a9tZY/

Por lo tanto, al hacer esto, no debería afectar el modelo u otros elementos que sean vinculantes para ese modelo.

Para resumir, dile a Angular que deje el elemento solo para siempre.

Answer 1

Puede llamar al método de desvinculación que deja de escuchar el elemento donde está presente el atributo ng-model. Ver violín: http://jsfiddle.net/jexgF/

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

unbind elimina todos los oyentes de eventos, por lo que cada vez que se realizan cambios, no los escuchará y, por lo tanto, no pasará por el bucle angular. También asumí que no está usando jQuery, pero si lo está, puede usar un selector mejor que document.getElementById

Answer 2

Este me dio curiosidad, así que hice algunos hurgando. Primero probé el método "unbind ()" sugerido en la otra respuesta, pero eso solo funcionó con la eliminación de los manejadores de eventos del elemento cuando lo que realmente intentas hacer es eliminar el alcance angular del elemento. Puede haber alguna función oculta más nítida en Angular para hacer esto, pero esto también funciona bien:

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

Esto conserva el modelo (y actualiza cualquier otra cosa que esté vinculada a él), pero elimina el enlace del elemento. Además, en el ejemplo anterior, no hay ningún enlace que eliminar porque no está vinculado a ningún elemento, solo muestra la expresión del modelo en línea. Mi ejemplo muestra esto en acción: http://jsfiddle.net/3jQMx/1/

Answer 3

ACTUALIZAR

La forma de hacerlo es crear un nuevo alcance en el elemento con una directiva como tal.

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

Y aplicarlo a su elemento como tal

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

Luego, para desvincular este elemento de las actualizaciones, haga esto.

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

Hecho, aquí hay una demostración.

Demostración: http://jsfiddle.net/KQD6H/

Por lo tanto, esto crea un nuevo ámbito en el elemento y solo funciona porque todos los ámbitos heredan todos los datos de sus ámbitos principales. por lo tanto, el alcance es básicamente el mismo que el alcance primario, pero le permite destruir el alcance sin afectar el alcance principal. Debido a que a este elemento se le dio su propio alcance, cuando lo destruye no recupera el alcance principal como todos los otros elementos, si tiene sentido.

Todo debajo de esta línea fue mi respuesta original, la dejaré aquí en caso de que alguien prefiera de esta manera

unbindable lograr esto de manera genuina con una directiva unbindable . Cuando tienes la directiva unbinable configurada en el elemento, todo lo que se requiere para desvincular el elemento es esto.

yourElement.attr(''unbind'', ''true''); // Ref 1
$scope.$broadcast(''unbind''); // Ref 2

Aquí está la directiva.

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
                }
            });
        }
    }
});

y configuras tu elemento de esta manera.

<h1 unbindable></h1>

Entonces, cada vez que agregue el atributo unbind="true" a la h1 y unbind la transmisión, el elemento será desvinculado-ed

REF-1: Agregue el atributo de desvincular verdadero al elemento para que la directiva sepa qué elemento está desvinculando.

REF-2: Transmita el evento de desvinculación a través de los ámbitos para que la directiva sepa que desea desvincular un elemento. Asegúrese de agregar el atributo primero. --- Según el diseño de su aplicación, es posible que deba usar $rootScope.$broadcast

REF-3 : cuando se difunde el evento de desvinculación

REF-4 : si el elemento asociado a la directiva tiene un verdadero atributo de desvinculación

REF-5 : Luego destruya el alcance hecho por la directiva. Tenemos que usar setTimeout porque creo que angular intenta hacer algo después del evento $on y obtenemos un error, por lo que usar setTimeout evitará ese error. Aunque se dispara al instante.

Esto funciona en múltiples elementos, aquí hay una buena demostración.

Demostración: http://jsfiddle.net/wzAXu/2/