Dividi il modello angolare in più piccoli modelli

Nella mia app Angolare, sto cercando di capire quale sarebbe il modo giusto per dividere la mia pagina in componenti.Dividi il modello angolare in più piccoli modelli

la pagina prima che la modifica è simile a:

<div id='settings'> 

    <p class='controlGroup' ng-controller="FirstCtrl"> 
    <label class='control-label'>First Control</label> 

    <div class="control"> 
     <!-- some inputs --> 
    </div> 
    </p> 

    <p class='controlGroup' ng-controller="SecondCtrl"> 
    <label class='control-label'>Second Control</label> 

    <div class="control"> 
     <!-- some inputs --> 
    </div> 
    </p> 

    </p> 


    <button id='saveBtn' class='saveButton' ng-click='saveSettings()'>Save Changes</button> 

</div>

Anche se la logica di controllo è separato a due controller diversi, voglio separare il loro modello come bene, quindi sarebbe facile da riutilizzare loro o per spostali in una posizione diversa.

Vedo molte opzioni: ng-include, script tag ecc

Quale sarebbe il modo giusto per farlo?

fonte

2013-05-06 Roy Tsabari

non vuoi barrare la risposta corretta? – Amir

direttive sono la scelta naturale per la creazione di componenti riutilizzabili in angolare: http://docs.angularjs.org/guide/directive

fonte

2013-05-06 11:58:47

sì ma le direttive sono così complicate per questo semplice problema. dovrebbero essere usati quando hai detto cose "riutilizzabili" che non separano le visualizzazioni. – Amir

Utilizzando ng-includere si può avere modelli diversi e semplicemente li iniettare nel parti del DOM usarlo, è un bene per i tempi quando si desidera caricare viste differenti in base a diverse situazioni, ad esempio facendo clic su un pulsante di navigazione o su una variabile, si noti che ng-include inoltre compila il modello in modo da poter utilizzare controller e altre caratteristiche angolari e direttive nel modello, ecco un esempio di documenti angularjs :

qui è il tuo html principale:

<!doctype html> 
<html ng-app> 
    <head> 
    <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script> 
    <script src="script.js"></script> 
    </head> 
    <body> 
    <div ng-controller="Ctrl"> 
     <select ng-model="template" ng-options="t.name for t in templates"> 
     <option value="">(blank)</option> 
     </select> 
     url of the template: <tt>{{template.url}}</tt> 
     <hr/> 
     <div ng-include src="template.url"></div> 
    </div> 
    </body> 
</html>

Ed ecco la JS:

function Ctrl($scope) { 
    $scope.templates = 
    [ { name: 'template1.html', url: 'template1.html'} 
    , { name: 'template2.html', url: 'template2.html'} ]; 
    $scope.template = $scope.templates[0]; 
}

fonte

2013-05-06 12:04:37 Amir

Dividi il modello angolare in più piccoli modelli

risposta

Problemi correlati