Question

我遇到了我认为常见的场景，我在其中使用MVC模式（特别是ASP.NET的MVC框架）用于Web应用程序，前端使用AngularJS。我的问题是我有一个特定的值，它是模型的一部分传递给我的视图，我也想让我的Angular控制器的$ scope，理想情况下，一旦初始化控制器。

如何做到这一点是以前被问及回答的问题。有明显的候选人：ngInit。然而，在某些时候，Angular更新了their documentation，似乎是针对这一特定想法的警告：

ngInit的唯一合适用途是对ngRepeat的特殊属性进行别名，如下面的演示所示。除了这种情况，您应该使用控制器而不是ngInit来初始化作用域上的值。

建议的替代方案不太相关。

当然，我还可以考虑其他解决方法。例如，视图可以将值插入到隐藏输入的ngModel指令中。或者我可以简单地忽略警告并使用ngInit。但是我能想到的任何一种方式都是与ngInit做同样事情的更丑陋的方式，或者显然更糟糕。

最终事实上，对我来说似乎是明显的解决方案显然是错误的，这可能表明我的心态与Angular应该如何完成无关。所以我的问题不是“我该如何处理这种情况”，而是：

我应该如何处理或避免这种情况？
为什么我不应该使用ngInit？

澄清，因为从前两个评论中不清楚：这是针对某些或大部分页面直接作为MVC视图提供的情况，只有一些特定的功能由Angular提供。我想传递给Angular控制器的数据已经传递给模型中的视图。我不希望Angular控制器然后去为服务器做自己的get请求，只是为了获得已经以不同格式提供给视图的相同参数。

Answer 1

您应该使用＆＃39;值＆＃39;将它从服务器端控制器传递到AngularJS控制器。或者＆＃39;常数＆＃39;提供者，如下所述：https://docs.angularjs.org/guide/providers

例如，您可以执行以下操作：

<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

如果您认为只是一个值可能会变得更复杂，您可以使用服务提供商并注入而不是价值提供者。

Answer 2

假设你有这个模型：
的模型

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

这样您就可以将控制器中的数据传递到视图中：
的控制器

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>

我如何从AngularJS控制器中的服务器端控制器传递数据？

2 个答案: