2016-04-20 72 views
0

为什么当我第一次点击Get Data什么都没有发生,只有当我点击第二次按钮时,它才会获取数据?为什么会发生这种延迟?Asp.net mvc angularjs奇怪的延迟

Index.cshtml:

@{ 
ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 
<script src="~/Scripts/CustomScripts/MyScript.js"></script> 
<script src="~/Scripts/moment.js"></script> 

<link rel="stylesheet/less" type="text/css" href="~/Scripts/CustomScripts/style.less"> 
<script src="~/Scripts/less-1.5.1.js" type="text/javascript"></script> 
    <li ng-repeat="employee in Employees"> 
     {{employee.name}} 
    </li> 
<button ng-click="getData()">Get Data</button> 

MyScripts.js

var app = angular.module("myApp", []); 

app.controller("calendarDemo", function ($scope, $http) { 
$scope.id = '5'; 
$scope.Employees = []; 
$scope.getData = function() { 
    $scope.getData = function (id) { 
     $http({ method: 'GET', url: '/Home/GetData/', params: { id: $scope.id} }). 
      success(function (data, status, headers, config) { 
       $.each(data, function (id, data) { 
        $scope.Employees.push({name: data.Name}); 
       }) 
       debugger; 
      }). 
      error(function (data, status, headers, config) { 
       alert('error'); 
      }); 
    }; 
} 
}); 

HomeController中:

namespace AngularJS.Controllers 
{ 
public class HomeController : Controller 
{ 
    // 
    // GET: /Home/ 

    public ActionResult Index() 
    { 
     return View(); 
    } 

    [HttpGet] 
    public JsonResult GetData(int id=0) 
    { 
     List<Employee> employees = new List<Employee>(); 
     employees.Add(new Employee { Name = "Jhon" }); 
     employees.Add(new Employee { Name = "Rick" }); 
     employees.Add(new Employee { Name = "Tony" }); 
     return Json(employees, JsonRequestBehavior.AllowGet); 
    } 
} 
public class Employee 
{ 
    public string Name { get; set; } 
} 
} 

_Layout.cshtml

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>@ViewBag.Title</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
    @Scripts.Render("~/bundles/angularjs") 
</head> 
<body ng-app="myApp" ng-controller="calendarDemo"> 
    @RenderBody() 

    @Scripts.Render("~/bundles/jquery") 

    @RenderSection("scripts", required: false) 
</body> 
</html> 
+0

你有两次定义的函数... – cnorthfield

+0

删除外部$ scope.getData = function(){} – cnorthfield

回答

1

该函数被定义两次,一个嵌套在另一个中。删除外部$ scope.getData = function(){},你应该没有问题。