angularjs - 控制器动作不起作用答案

【问题标题】：angularjs - controller actions not workingangularjs - 控制器动作不起作用
【发布时间】：2016-01-03 21:02:57
【问题描述】：

对不起，如果我做错了什么，我是新来的'^^

我目前正在从事一个使用 MVC 构建网站的学校项目。我正在尝试使用 Json 对象和 angularJS 从数据库中加载对象。

我在一个名为“GetProductsByJson”的控制器中有一个操作，它返回一个包含产品列表的 Json 对象。这是行动：

public ActionResult GetProductsByJson()
        {
            HomeModel homeModel = new HomeModel();
            DataLayer prodDal = new DataLayer();
            homeModel.productList = prodDal.Products.ToList<Product>();
            return Json(homeModel.productList,JsonRequestBehavior.AllowGet);
        }

它自己的动作很好（我单独测试了它）但是当我尝试在角度脚本中使用它时它只是不起作用（它甚至没有进入方法）。

这是角脚本：

<script>
        var app = angular.module("myProduct", []);
        app.controller("ProductViewModel", function ($scope,$http) {

            $scope.Product = {
                "prodName": "",
                "price": "",
                "amount": "",
                "serial": "",
                "lastUpdate": "",
                "pic": ""
            };

            $scope.Products = {};

            $scope.LoadProducts = function () { //load data from the server
                debugger
                $http({ method: "GET", url: "LoadProducts" }).
                success(function (data, status, headers, config) {
                    $scope.Products = data;
                });
            };

            $scope.LoadProducts();
        });
 </script>

我尝试在 RouteConfig 中路由操作，但没有任何效果。

好吧，我真的很抱歉问题解决了。

我不得不插入动作的完整网址。

【问题讨论】：

在浏览器中加载开发人员工具栏，查看是否正在向服务器发出请求（在“网络”选项卡中）。如果是这样，服务器返回什么？当您写url: "LoadProducts" 时，这将向/LoadProducts 发出请求。您确定您的 MVC 应用程序会正确响应此类路由吗？
你的角度有没有被引导？
太多未知数和可怕的问题描述。使用浏览器控制台中的调试工具进行进一步调查
显示调用方法的 html。此外，当您说“我有一个方法 LoadProducts”时，它会让人感到困惑。您的 Angular 和 Server 方法都称为 LoadProducts。所以，当你说“它不去那个方法”时——它不去那个方法？

标签： javascript angularjs json asp.net-mvc

【解决方案1】：

我认为当您的 Angular 代码尝试对您的操作方法进行异步调用时，您会收到 404 错误，因为您提供给操作方法的相对路径不正确。

像这样在你的 javascript 中硬核你的 url 不是一个好主意。哟应该在你的 razor 视图中使用 Url.Content() 或 Url.RouteUrl() 辅助方法来生成应用程序根目录的相对 URL。无论您当前的页面/路径如何，它都会正确构建 url。一旦您获得此值，您就可以使用 angular value 提供程序将其传递给您的 angular 控制器。

因此，在您的 razor 视图（布局文件或您的特定视图）中，您可以这样做。

<script>
    var myApp = myApp || {};
    myApp.Urls = myApp.Urls || {};
    myApp.Urls.baseUrl = '@Url.Content("~")';       
</script>
<script src="~/Scripts/AngularControllerForPage.js"></script>
<script>
    var a = angular.module("myProduct").value("appSettings", myApp);
</script>

在你的角度控制器中（在外部AngularControllerForPage.js file），你可以像这样访问它，

var app = angular.module("myProduct", []);
var ctrl = function (appSettings,$http) {

    var vm = this;

    vm.products = [];

    vm.baseUrl = appSettings.Urls.baseUrl;

    //build other urls using the base url now
    var loadProductsUrl = vm.baseUrl + "YourControllerNameHere/GetProductsByJson";
    console.log(loadProductsUrl);

    // now you can use loadProductsUrl to make the $http call

    $http.get(loadProductsUrl).then(function(response) {
           vm.products=response.data;
         }

};
ctrl.inject=['$http'];
app.controller("ProductViewModel", ctrl);

您可以看到我正在访问$http 服务的then() 事件中的响应。上述控制器代码的编写方式也支持controller As 语法，正如john papa 在他的angular styleguide 中所建议的那样。所以在你看来，你会像访问它一样

<div ng-app="myProduct" ng-controller="ProductViewModel as vm">
    <h1>{{vm.products.length}} Items</h1>    
</div>

【讨论】：