javascript - 将初始 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>

然后 Controller 中的回调函数将更新Model.Quantity

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

一定有更好的方法!

Answer 1

But this doesn't work... vm is undefined.

您需要捕获此:

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>

可以将其注入(inject)到您的 Controller 中:

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

<小时/>

更新:

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

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