Angularjs - Cambia dinamicamente dom con direttive o widget?

il mio obiettivo è capire come utilizzare correttamente angularJS. Voglio essere in grado di legare una selezione di variabili per cambiare dinamicamente la struttura DOM usando angularJS. Non penso di capire abbastanza la documentazione fornita dall'angolare e non ho trovato alcun esempio qui o in altro modo. Qualsiasi aiuto è apprezzato.Angularjs - Cambia dinamicamente dom con direttive o widget?

L'idea è che ho questo caso d'uso in cui in primo luogo inizio con la selezione del tipo e da quel tipo selezionato, gli elementi del tipo di input appropriati verranno creati e quindi registrati successivamente con il modello ng (dai textareas a caselle di controllo per esempio), il tutto controllato dal controller angularjs per validazione/restrizioni. Sono abituato all'idea di avere elementi clonabili sulla pagina e di distruggerli e crearne di nuovi con jQuery, ma ho letto che i controller non dovrebbero avere questa logica e dovrebbero invece essere creati con direttive/widget. Tuttavia, non vedo alcun esempio di direttive o widget manipolati in questo modo, quindi non sono nemmeno sicuro di come procedere. Posso usare le direttive per manipolare il DOM in questo modo, non solo una volta ma più volte in base a un elemento guardato?

Esempio di cosa mi piacerebbe fare.

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

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

Seleziona Tipo 1:

Visualizza zone 2 testo

Seleziona tipo 2:

Mostra un input numerico
Mostra una selezione data

Grazie,

-JR.

fonte

2012-08-07 kman

Questo è come lo farei. Si noti che questo è solo un punto di partenza. C'è ancora una questione di legame a valori particolari negli ingressi corrispondenti. Spero possa essere d'aiuto.

Markup:

<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>

direttiva:

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

Controller:

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

fonte

2012-08-08 23:06:38

Questo è il posto dove stavo andando, vorrei che ci fossero altri esempi che potrei imparare dal loro sito. Quella funzione di orologio è molto utile per questo. Questo è esattamente il tipo di cosa che stavo cercando. Apprezzo l'aiuto! – kman

(riguardo al codice direttiva :) Penso che non dovresti aggiungere un 'scope. $ Watch' all'interno di' render', dato che devi configurare '$ watch' solo una volta. – mik01aj

@ m01 è in realtà nella funzione di collegamento. In realtà è in esecuzione più di una volta? –

Il modo più semplice e facile che posso pensare di fare è semplicemente usando ng-show e ng-hide.

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>

Naturalmente si potrebbe pulire questo senza mettere alcuna logica nel codice HTML, ma non volevo offuscare la questione con materiale extra nel controller.

Per la convalida, fare riferimento a forms documentation. È probabile che utilizzerai principalmente la versione di validazione di AngularJS incorporata con alcuni personalizzati che crei.

Per quanto riguarda le direttive, il online docs è denso, ma farà clic dopo aver sperimentato per un po '. Per un'introduzione più gentile, Jon Lindquist ha un tutorial mondiale Hello su YouTube. Le direttive sono sicuramente il modo di manipolare DOM in Angular.

fonte

2012-08-08 01:45:14 Chris

Grazie, ho provato questo e sembra funzionare, ma mi lascia in grado di effettuare con facilità cambia all'elemento una volta che ne ho dell'altro. Quel video ha sicuramente aiutato! – kman

Angularjs - Cambia dinamicamente dom con direttive o widget?

risposta

Problemi correlati