Angularjs - ¿Cambia dinámicamente dom con directivas o widgets?

mi objetivo es comprender cómo utilizar angularJS correctamente. Quiero poder vincular una selección de variables para cambiar dinámicamente la estructura DOM utilizando angularJS. No creo entender bien la documentación que proporciona angular y no he encontrado ningún ejemplo aquí o de otro modo. Cualquier ayuda es apreciada.Angularjs - ¿Cambia dinámicamente dom con directivas o widgets?

La idea es que tengo este caso de uso en el que empiezo por la selección del tipo y de ese tipo seleccionado, los elementos de tipo de entrada apropiados se crearán y luego se registrarán con el modelo ng (desde textareas hasta casillas de verificación, por ejemplo), todo el tiempo controlado por el controlador angularjs para validación/restricciones. Estoy acostumbrado a la idea de tener elementos clonables en la página y destruir y crear nuevos con jQuery, pero he estado leyendo que los controladores no deberían tener esta lógica y deberían crearse con directivas/widgets. No veo ningún ejemplo de directivas o widgets manipulados de esta manera, así que no estoy seguro de cómo proceder. ¿Puedo usar directivas para manipular el DOM de esta manera, no solo una vez, sino varias veces según un elemento observado?

Ejemplo de lo que me gustaría hacer.

$scope.types = ['Type1','Type2'] 

// something along the lines of... 
$scope.layouts = {'Type1':['textarea','textarea'], 'Type2':['numeric','datepicker']}

Seleccionar Tipo 1:

Mostrar zonas 2 texto

Seleccionar tipo 2:

muestran una entrada numérica
muestran un selector de fecha

Gracias,

-JR.

Fuente

2012-08-07 kman

Esta es la forma en que lo haría. Tenga en cuenta que este es solo un punto de partida. Todavía hay una cuestión de vinculación a valores particulares en las entradas correspondientes. Espero que ayude.

de marcado:

<html ng-app="App" ng-controller="MainCtrl"> 

<body> 

    <component index="0"></component> 
    <component index="1"></component> 
    Current type: {{type}} 
    <button ng-click="toggleType()">Toggle</button> 

</body> 

</html>

Directiva:

var ngApp = angular.module('App', []).directive('component', function() { 
    var link = function(scope, element, attrs) { 
    var render = function() { 
     var t = scope.layouts[scope.type][attrs.index]; 
     if (t === 'textarea') { 
     element.html('<' + t + ' /><br>'); 
     } 
     else { 
     element.html('<input type="' + t + '"><br>'); 
     } 
    }; 
    //key point here to watch for changes of the type property 
    scope.$watch('type', function(newValue, oldValue) { 
     render(); 
    }); 

    render(); 
    }; 
    return { 
    restrict : 'E', 
    link : link 
    } 
});

controlador:

var MainCtrl = function MainCtrl($scope) { 
    $scope.type = 'Type1'; 
    $scope.types = [ 'Type1', 'Type2' ]; 
    $scope.layouts = { 
    'Type1' : [ 'textarea', 'textarea' ], 
    'Type2' : [ 'number', 'text' ] 
    }; 

    $scope.toggleType = function() { 
    if ($scope.type === 'Type1') { 
     $scope.type = 'Type2'; 
    } 
    else { 
     $scope.type = 'Type1'; 
    } 
    }; 
};

Fuente

2012-08-08 23:06:38

Aquí es donde iba, ojalá hubiera más ejemplos que pudiera aprender de su sitio. Esa función de reloj es muy útil para esto. Esto es exactamente el tipo de cosa que estaba buscando. Aprecio la ayuda! – kman

(con respecto al código de la directiva :) Creo que no debe agregar 'scope. $ Watch' dentro de' render', ya que necesita configurar '$ watch' solo una vez. – mik01aj

@ m01 en realidad está en la función de enlace. ¿Se está ejecutando realmente más de una vez? –

La manera fácil de muertos caída más puedo pensar en hacer esto es sólo por el uso ng-ng espectáculo y de piel.

http://jsfiddle.net/cfchase/Xn7PA/

<select ng-model="selected_type" ng-options="t for t in types"> 
</select> 

<div ng-show="selected_type=='Type1'"> 
    <input type="text" id="text1" ng-model="text1"/> 
    <input type="text" id="text2" ng-model="text2"/> 
</div> 

<div ng-show="selected_type=='Type2'"> 
    <input type="number" id="numeric1" ng-model="numeric1"/> 
    <input type="date" id="date1" ng-model="date1"/> 
</div>

Por supuesto que podría limpiar esto sin poner ninguna lógica en el html, pero yo no quería enturbiar el problema con material extra en el controlador.

Para la validación, se refieren a la forms documentation. Es probable que use principalmente la validación integrada de AngularJS con algunas personalizadas que construya.

En cuanto a las directivas, el online docs es denso, pero hará clic después de haber experimentado por un tiempo. Para una introducción más amable, Jon Lindquist tiene un tutorial de Hello World en YouTube. Las directivas son definitivamente la forma de hacer la manipulación DOM en Angular.

Fuente

2012-08-08 01:45:14 Chris

Gracias, he intentado esto y parece que funciona, pero no me deja hacer fácilmente cambios en el elemento una vez que tengo más. ¡Ese video realmente ayudó! – kman

Angularjs - ¿Cambia dinámicamente dom con directivas o widgets?

Respuesta

Cuestiones relacionadas