AngularJS 嵌套视图

Question

编辑于 10 月 05 日

我一直在关注这个 anjularjs 和 asp.net 教程。我试图自己添加一些额外的东西，但我被卡住了。我正在从服务器获取一个 JSon 对象，我正在尝试向客户端显示该对象的内容。问题是当我希望看到 ID、名称和密码列表时，我在客户端获取 [object Object]。我在这里错过了什么？

//The controller

  myApp.controller('userController', function ($scope,$http /*UserService*/) {
      //  $scope.Users = [];
        $http.post('/Templates/ListUsers',{ id : 0})
        .success(function (data) {
            // $scope.Users = data.data;
            if (data.Ok) {
                $scope.Users = data.data;
                console.log($scope.Users);
            }
        }).error(function(error){
            console.log(error);
        });

//The form where the data is supposed to display. 
<div class="row">
       <div class="form-group">
           <li ng-repeat="x in Users"> 
**//I am iterating through the users, 
//so I was not expected to see [object Object]**
               {{ x.ID, x.Name, x.Password  }}
           </li>
       </div>
   </div>   

//The JSON object in the console window:
[{"ID":1,"Name":"Name1","Password":"Password1"},
{"ID":2,"Name":"Name2","Password":"Password2"},     
{"ID":3,"Name":"Name3","Password":"Password3"},
{"ID":4,"Name":"Name4","Password":"Password4"}]

AngularJS和Angular-路由版本1.4.7的索引页

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
  <head>
    <title>AngularJS Routing example</title>
      <base href="/">
  </head>

  <body>

    <div class="container">
        <div class="row">
        <div class="col-md-3">
            <ul class="nav">
                <li><a href="/NewOrder"> Add New Order </a></li>
                <li><a href="/ShowOrders/123"> Show Order </a></li>
               <div ng-controller="CalculatorController">
                <li><a href="/Calculator">Calculator</a></li>
              </div>
                <li><a href="/Users">Add Users</a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <div ng-view></div>
        </div>
        </div>
    </div>


@*   <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>  *@
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
   <link rel="stylesheet" href="style.css" />
    <script src="~/Scripts/myApp.js"></script>
  </body>

//2006 年 10 月更新：

我没有使用 CDN 引用，而是下载了 AngularJS 和 AngularJS-Route 1.4.7 并引用了它们。当我运行应用程序时，它只显示整个 JSON 对象。

[HttpGet]
    public JsonResult ListUsers()
     {
       return View();
     }

 [HttpPost]
        public JsonResult ListUsers(int id=0)
        {
            try
            {
                List<User> listUser = new List<User>()
            {
                new User{ ID= 1, Name = "Name1", Password="Password1"},
                new User{ ID= 2, Name = "Name2", Password="Password2"},
                new User{ ID= 3, Name = "Name3", Password="Password3"},
                new User{ ID= 4, Name = "Name4", Password="Password4"}
            };

                return Json(new { Ok = true, data = listUser, message = "Success" }, JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                ex.ToString();
                return Json(new { Ok = false, data = "", message = "Failure" }, JsonRequestBehavior.AllowGet);
            }
        }

添加的路由

  routes.MapRoute(
                name : "listUsers",
                url : "Templates/ListUsers/{id}",
                defaults : new { controller = "Templates", action = 
 "ListUsers", id = UrlParameter.Optional });

更新于 10 月 07 日

我注意到将视图更改为 return 视图并将 json 对象硬编码到用户的控制器是可行的。因此，我添加了另一个带有 [HttpPost] 注释的方法，将 $http.get 更改为 $http.post，并添加了 ID 参数。此外，我修改了路由以具有可选的 id，以便“/Templates/ListUsers”可以工作，因此它是“/Templates/ListUsers/1”。我期望参数为 1 的 $http.post 重定向到带有 HttpPost 注释的方法，但它没有发生。在这一点上，我不确定事情是否对我有意义。我正在再次阅读 $http.post ，看看我是否能看出我在哪里犯了错误。

Answer 1

您的基本模板应该有一个 ui-view 来保存 preLogin 部分视图，否则 angular 不知道将它放在哪里。您甚至可以在基本模板上编写模板本身，或将其设为指令，然后根据基本控制器中的某些条件show/hide。

Answer 2

尽管突然出现另一个问题，但我终于让它工作了。我删除了默认路由并添加了一个 catch all 路由。

 routes.MapRoute(
                name : "catchAll",
                url : "{*Url}",
                defaults : new { controller = "Templates", action = 
 "ListUsers", id = UrlParameter.Optional });

巧合的是，我也删除了下面这条路线的评论

 routes.MapRoute(
                name : "Default",
                url : "{controller}/{action}/{id}",
                defaults : new { controller = "Home", action = 
 "Index", id = UrlParameter.Optional });

我做了一个 post，它成功了。如果我评论了 catch all 路线，它工作正常。但是，此时 catch all 路由似乎没有做任何事情，因为刷新页面返回 404。如果我将 catch all 移动到默认路由之上，它也会停止工作。我现在仍然需要弄清楚这部分。

AngularJS 嵌套视图

AngularJS Nested View

angularjs

asp.net-mvc-4

angularjs-routing

angularjs-view