C'è un modo per far funzionare AngularJS prima con HTML?

Question

C'è un modo per avere una vista HTML con valori precompilati dal server, e quindi ottenere AngularJS per leggere quei valori nel suo $scope?

sto pensando di uno scenario in cui il codice HTML è come questo:

<div ng-controller="TestController"> 
    <div ng-bind="title">Test Title</div> 
    <div ng-bind="itemCount">33</div> 
    <div ng-repeat="item in items"> 
     <div ng-bind="item.title">Item 1 Title</div> 
    </div> 
</div> 
<button ng-click="update()">Update</button> 

E il JavaScript è come questo:

function TestController($scope) { 
    $scope.update = function() { 
     console.log($scope.title); // Should log "Test Title" 
    }; 
} 

Il pensiero alla base di questo è quello di lasciare rendere il server HTML che i motori di ricerca possono indicizzare, ma hanno una rappresentazione del modello JavaScript del contenuto per la manipolazione tramite JS.

Answer 1

Aggiungi ng-init ai tuoi elementi con il valore in modo che funzioni nel modo desiderato.

http://docs.angularjs.org/api/ng.directive:ngInit

Answer 2

Mentre ng-init è una soluzione, richiede di impostare in modo esplicito il valore. Quindi ecco una soluzione alternativa.

http://plnkr.co/edit/pq8yR9zVOHFI6IRU3Pvn?p=preview

Nota: Questa soluzione non funzionerà per ng-repeat. Le direttive di controllo del flusso non possono essere utilizzate con questo. Ma per la semplice estrazione di informazioni da ng-bind funziona abbastanza bene. Tutto quello che devi fare è aggiungere la direttiva default (codice in plunk) a qualunque posto si stia eseguendo il binding ed estrarrà il contenuto del testo e lo invierà alla variabile scope.

EDIT (soluzione con ng-repeat):

Così, stavo pensando di un modo per fare ng-repeat anche funzionare allo stesso modo. Ma far funzionare ng-repeat in questo modo non è un lavoro facile (vedi il codice per la prova: P). Ho finalmente trovato una soluzione - qui si va:

http://plnkr.co/edit/GEWhCNVMeNVaq9JA2Xm2?p=preview

Ci sono un paio di cose che dovete sapere prima di usare questo. Questo non è stato accuratamente testato. Funziona solo per la ripetizione su array (non su oggetti). Ci potrebbero essere casi che non sono stati coperti. Sto sovrascrivendo ngRepeat stesso che potrebbe avere altre conseguenze. Quando esegui il loop degli elementi (nel codice lato server) non dimenticare di aggiungere default="true" sul primo elemento e default sul resto degli elementi.

Spero che questo aiuti.

Answer 3

Penso che quello che vuoi veramente sia rendere la tua ricerca ricercabile servendo file statici in parallelo. Leggi di più qui http://www.yearofmoo.com/2012/11/angularjs-and-seo.html