8

サーバーから値が事前入力された HTML ビューを作成し、AngularJS にそれらの値を読み込ませる方法はあります$scopeか?

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 をサーバーがレンダリングできるようにすることですが、JS を介して操作するためのコンテンツの JavaScript モデル表現を持たせることです。

4

3 に答える 3

7

は 1 つの解決策ですがng-init、値を明示的に設定する必要があります。したがって、ここに代替ソリューションがあります。

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

注: この解決策は には機能しませんng-repeat。これでは制御フロー ディレクティブを使用できません。しかし、これから情報を簡単に抽出するには、ng-bindかなりうまく機能します。defaultバインドを実行している場所にディレクティブ ( plunk のコード) を追加するだけで、テキスト コンテンツが抽出され、スコープ変数にプッシュされます。

編集（ng-repeatによる解決策）：

そこで、ng-repeat も同じように動作させる方法を考えていました。しかし、このように ng-repeat を機能させるのは簡単なことではありません (証明のためのコードを参照してください:P )。私はついに解決策を見つけました-ここに行きます：

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

これを使用する前に知っておくべきことがいくつかあります。これは十分にテストされていません。配列を繰り返す場合にのみ機能します（オブジェクトではありません）。対象外となるケースもございます。他の結果をもたらす可能性がある ngRepeat 自体をオーバーライドしています。(サーバー側のコードで) アイテムをループするときはdefault="true"、最初の要素とdefault残りの要素を追加することを忘れないでください。

お役に立てれば。

于 2013-04-05T13:48:17.960 に答える
0

要素に値を追加 ng-initして、希望どおりに機能するようにします。

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

于 2013-04-05T13:39:31.130 に答える