2013-04-05 9 views
8

サーバからの事前設定された値をHTMLビューに表示し、AngularJSがそれらの値を読み取るようにする方法はありますか?$scopeAngularJSをHTMLで動作させる方法はありますか?

私はHTMLは次のようであるシナリオを考えています:

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

とJavaScriptはこのようなものです:

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

この背後にある考えはサーバがレンダリングさせることです HTML 検索エンジンはをインデックスできますが、のJS30を介したコンテンツのJavaScriptモデル表現はです。

答えて

0

ng-initを値を使って要素に追加すると、必要なように機能します。

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

+0

それはコレクションに使えますか?そして私のビューをモデル更新と同期させておくにはどうしたらいいですか? –

7

ng-initが一つの解決策である、それが明示的に値を設定する必要がありますが。だからここには別の解決策があります。

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

:このソリューションは、文句を言わないng-repeatのために働きます。制御フロー指令はこれで使用できません。しかし、ng-bindからの情報の簡単な抽出のために、これはかなりうまくいく。あなたがしなければならないことは、あなたがバインドを行っているところにdefaultディレクティブ(plunkのコード)を追加することです。そして、テキストコンテンツを抽出してスコープ変数にプッシュします。

EDIT(NG-繰り返しで溶液):

だから、私はNGリピートも同じように動作させるための方法を考えていました。しかし、このように動作するようにng-repeatを行うのは簡単な仕事ではありません(proof:Pのコードを参照)。私は最終的に解決策を見つけた - ここにあなたが行く:あなたはこれを使用する前に知っておくべきことがいくつかあります

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

。これは徹底的にテストされていません。これはオブジェクト全体ではなく配列を繰り返す場合にのみ機能します。カバーされていない場合があります。私は他の結果をもたらす可能性のあるngRepeatをオーバーライドしています。 (あなたのサーバー側のコードで)項目をループするとき、最初の要素にdefault="true"と残りの要素にdefaultを追加することを忘れないでください。

これが役に立ちます。

+0

これは、多くのおかげで、助けてください。 'repeat'-situationを管理する方法についてのヒントはありますか? –

+2

私は現在、 'ng-repeat'の状況の解決策を持っていません。 – ganaraj

+0

@SebNilsson: 'ng-repeat'をサポートする別のplunkを含むように答えを更新しました。見てみましょう。 – ganaraj

0

あなたが本当に望むのは、静的ファイルを並列で提供することによってアプリケーションを検索可能にすることです。それについての詳細はこちらhttp://www.yearofmoo.com/2012/11/angularjs-and-seo.html

+3

"Apacheを使用している場合..." - 私はそうではありません。また、ハッシュバングはベビーキツンを殺します。 –

関連する問題