Gibt es eine Möglichkeit, AngularJS mit HTML zu arbeiten?

Question

Gibt es eine Möglichkeit, eine HTML-Ansicht mit vorab ausgefüllten Werten vom Server zu erstellen und dann AngularJS dazu zu bringen, diese Werte in seine $scope einzulesen?

Ich bin ein Szenario denken, wo die HTML ist wie folgt:

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

Und das JavaScript ist wie folgt:

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

Der Gedanke dahinter ist, die Server machen zu lassen, HTML, dass Suchmaschinen indexieren können, aber eine JavaScript-Modell-Darstellung des Inhalts für die Manipulation durch JS haben.

Answer 1

Fügen Sie ng-init zu Ihren Elementen hinzu, damit der Wert so funktioniert, wie Sie es möchten.

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

Answer 2

Während ng-init eine Lösung ist, es erfordert, dass Sie den Wert explizit festgelegt. Also hier ist eine alternative Lösung.

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

Hinweis: Diese Lösung wird nicht für ng-repeat arbeiten. Control-Flow-Direktiven können damit nicht verwendet werden. Aber für die einfache Extraktion von Informationen aus ng-bind funktioniert das ziemlich gut. Alles, was Sie tun müssen, ist die default Direktive (Code in Plunk), wo immer Sie die Bindung tun, und es wird den Textinhalt extrahieren und es auf die Variable scope schieben.

EDIT (Lösung mit ng-Wiederholung):

Also, ich dachte an eine Art und Weise ng-repeat auch funktionieren auf die gleiche Art und Weise zu machen. Aber ng-repeat zu arbeiten, ist kein einfacher Job (siehe den Code für den Beweis: P). Ich habe endlich eine Lösung gefunden - hier geht:

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

Es gibt ein paar Dinge, die Sie wissen müssen, bevor Sie diese verwenden. Dies wurde nicht gründlich getestet. Es funktioniert nur zum Wiederholen über Arrays (nicht Objekte). Es könnte Fälle geben, die nicht abgedeckt wurden. Ich übertreibe ngRepeat selbst, was andere Konsequenzen haben könnte. Wenn Sie die Elemente durchlaufen (in Ihrem Server-Side-Code) vergessen Sie nicht, default="true" auf dem ersten Element und default auf den Rest der Elemente hinzuzufügen.

Hoffe, das hilft.

Answer 3

Ich denke, was Sie wirklich wollen, ist Ihre Anwendung durch parallele Bereitstellung statischer Dateien durchsuchbar machen. Lesen Sie mehr darüber http://www.yearofmoo.com/2012/11/angularjs-and-seo.html