将初始 Razor 输出与 Angular 更新相结合

Question

我有 ASP.NET5 / MVC6 应用程序。用户加载页面，Razor View 负责数据的输出。例如（这是一个虚构的例子，仅供说明）：

<div>@Model.Quantity</div>

用户可以更新数量，这是通过 Angular $resource 服务的 POST 完成的。服务器上的 HttpPost 更新数据库，并以 JSON 格式返回新的数量。我想更新页面上的值而不刷新整个页面。很清楚如何在 JQuery 中做到这一点：

$("#quantity").html(data)

但如果可能的话，我想继续使用 Angular。所以，我想象这样的事情：

<div ng-controller="inventoryCtrl as vm">

<script>
vm.Model.Quantity = @Model.Quantity
</script>

<div>{{vm.Model.Quantity}}</div>
</div>

然后控制器中的回调函数会更新Model.Quantity

但这不起作用... vm 未定义。

一定有更好的方法！

Answer 1

但这不起作用... vm 未定义。

你需要捕获this:

var that = this;

这样您就可以在资源上的 AJAX 请求的 then 回调中更新模型：

.then(function(result) {
    that.Model.Quantity = result;
});

---

更新：

我误解了你的问题。您似乎在初始渲染时遇到问题。这可以很容易地实现：

<script>
    var quantity = @Html.Raw(Json.Encode(Model.Quantity));
    // declare the quantity that came from the server as constant value
    app.constant('quantity', quantity);
</script>

可以注入到你的控制器中：

app.controller('MainCtrl', function (quantity) {
    this.Model.Quantity = quantity;
});

---

更新：

您也可以将整个对象图存储到一个常量中：

<script>
    var model = @Html.Raw(Json.Encode(Model));
    app.constant('model', model);
</script>