Question

我在Asp.net MVC项目中使用AngularJs。我熟悉编程模型，我让页面加载，然后角度调用到svc端点以检索一些数据。

这很好但是当我在Asp.net MVC中呈现页面时，我可以访问所有这些数据，我想避免使用svc调用。

我可以举例如

<ul>
     <li data-ng-repeat="image in Images">{data}
         <button data-ng-click="delete()">x</button>
     </li>
</ul>

这会为每个<li/>提供一个新范围，当有人点击按钮时，delete（）会获得包含图像的$范围

如果我想要在MVC视图中绑定数据，如：

<ul>
     @foreach (var image in Model.Images
     {
     <li>
         @image.data
         <button data-ng-click="delete()">x</button>
     </li>
     }
</ul>

我该怎么做才能告诉AngularJS关于对象的状态？即按下按钮时，它会想知道

我是以错误的方式解决这个问题吗？

思想？

Answer 1

第二种方式并不正确，因为你没有使用角度数据绑定，只是使用普通剃刀来渲染你的视图。

＆＃34; razor＆＃34;渲染发生在服务器端，而角度的数据绑定发生在客户端。

您通常需要对模型进行角度调整，并且数据会将您的视图绑定到模型。

从技术上讲，你可以用你在这里写的东西使用$ compile（阅读更多），但这不是正确的。

Answer 2

您可以将初始数据序列化为JSON并将其嵌入到页面中。像这样......

控制器

var serializer = new JavaScriptSerializer();
viewModel.ImagesJson = serializer.Serializer(images);
return View(viewModel);

剃刀

app.value("images", @Html.Raw(Model.ImagesJson));

app.controller("myController", function ($scope, images) {
    $scope.images = images;
    $scope.delete = function (image) {
        // ...
    };
});

输出如下：

app.value("images", [{ "src": "/foo.jpg" }, ... ]);

然后只使用Angular数据绑定...

<ul>
     <li data-ng-repeat="image in images">{data}
         <button data-ng-click="delete(image)">x</button>
     </li>
</ul>

angularjs和现有标记

2 个答案: