21

フロントエンドにAngularJSを使用して、WebアプリケーションにMVCパターン（具体的にはASP.NETのMVCフレームワーク）を使用しているという、一般的なシナリオであると私が信じているものに遭遇しました。私の問題は、ビューに渡されるモデルの一部である特定の値があることです。これは、理想的にはコントローラーが初期化されるとすぐに、Angular コントローラーの $scope でも利用できるようにしたいということです。

これを行う方法は、以前に尋ねられ、回答された質問です。明らかな候補があります: ngInit. ただし、ある時点で、Angularはドキュメントを更新し、この特定の考えに対する警告のように思われるものを追加しました。

の唯一の適切な使用法は、以下のデモに見られるように、 のngInit特別なプロパティをエイリアシングすることです。このケース以外では、スコープの値を初期化するのngRepeatではなく、コントローラーを使用する必要があります。ngInit

提案された代替案はあまり関連性がありません。

もちろん、私が考えることができる他の回避策があります。ngModelビューは、たとえば、非表示の入力のディレクティブに値を挿入できます。または、警告を無視してngInitとにかく使用することもできます。しかし、私が考えることができるのは、 と同じことを行うより醜い方法か、ngInit明らかに悪い方法です。

最終的に、私にとって明白な解決策のように思えることが、明らかに間違った解決策であるという事実は、おそらく、Angular がどのように行われることになっているのか、私の考え方が調和していないことを示しています。したがって、私の質問は「このシナリオにどう対処するか」ではなく、次のとおりです。

  1. このシナリオにどのように対処または回避する必要がありますか?
  2. を使用してはいけないのはなぜngInitですか?

最初の 2 つのコメントからは明確でないため、明確化: これは、ページの一部または大部分が MVC ビューとして直接提供され、特定の機能のみが Angular によって提供される状況のためのものです。Angular コントローラーに渡したいデータは、モデル内のビューに既に渡されています。Angular コントローラーが別の形式でビューで既に使用可能な同じパラメーターを取得するためだけに、サーバーに対して独自の get 要求を実行する必要はありません。

4

2 に答える 2

25

https://docs.angularjs.org/guide/providersで説明されているように、「値」または「定数」プロバイダーを使用して、サーバー側コントローラーから AngularJS コントローラーに渡す必要があります。

たとえば、次のようなことができます。

<script>
    angular.module("hobbitModule").value("companionship", @Html.Raw(Model));
</script>

そしてそれをコントローラーに注入します

var module = angular.module("hobbitModule");
module.controller("CompanionshipController", function($scope, companionship) {
    $scope.companions = companionship;
});

この記事で説明されているように: http://blog.mariusschulz.com/2014/03/25/bootstrapping-angularjs-applications-with-server-side-data-from-aspnet-mvc

単なる値よりも複雑になる可能性があると思われる場合は、Service プロバイダーを使用して、値プロバイダーの代わりにそれを注入できます。

于 2014-09-05T05:23:27.693 に答える
2

あなたがこのモデルを持っていると仮定:
モデル

public class Product
{
        public int Id { get; set; }
        public string Name { get; set; }
        public float Price { get; set; }
        public string Description { get; set; }
}

このようにして、コントローラからビューにデータを渡すことができます:
Controller

public string GetSerializedProduct()
{
    var products = new[] 
    { 
        new Product{Id=1,Name="product1",Price=4500,Description="description of this product"},
        new Product{Id=2,Name="product2",Price=500,Description="description of this product"},
        new Product{Id=3,Name="product3",Price=400,Description="description of this product"},
        new Product{Id=4,Name="product4",Price=5500,Description="description of this product"},
        new Product{Id=5,Name="product5",Price=66500,Description="description of this product"}
    };
    var settings = new JsonSerializerSettings { ContractResolver=new CamelCasePropertyNamesContractResolver()};
    return JsonConvert.SerializeObject(products,Formatting.None,settings);
    }
}

ビュー:

@model string
<div class="container" ng-init="products = @Model">
    <div class="row">
        <div class="col-lg-12">
            <table class="table table-condensed table-hover">
                <tr>
                    <th>Id</th>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>Description</th>
                </tr>
                <tr ng-repeat="product in products">
                    <td>{{product.id}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.price}}</td>
                    <td>{{product.description}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>
于 2014-03-09T09:12:10.353 に答える