21

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

如何做到这一点是之前已经提出并回答的问题。有一个明显的候选人：ngInit. 然而，在某些时候，Angular 更新了他们的文档，似乎是对这种特定想法的警告：

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

建议的替代方案不是很相关。

当然，我还可以想到其他解决方法。例如，视图可以将值插入到ngModel隐藏输入的指令中。或者我可以直接忽略警告并使用ngInit。但是我能想到的任何东西要么是做同样事情的更丑陋的方式ngInit，要么显然更糟。

归根结底，对我来说似乎显而易见的解决方案显然是错误的这一事实可能表明我的心态与 Angular 的应有方式不一致。所以我的问题不是“我该如何处理这种情况”，而是：

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

澄清一下，因为从前两条评论来看，这并不清楚：这是针对部分或大部分页面直接作为 MVC 视图提供服务的情况，Angular 仅提供某些特定功能。我想传递给 Angular 控制器的数据已经传递给模型中的视图。我不希望 Angular 控制器然后必须向服务器发出自己的 get 请求，只是为了获取不同格式的视图已经可用的相同参数。

4

2 回答 2

25

您应该使用“值”或“常量”提供程序将其从服务器端控制器传递到 AngularJS 控制器，如下所述：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

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

于 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; }
}

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

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