Question

我在登录成功时将用户名指定给标签，但未分配。

以下是我的HTML

<body class="nav navbar-nav" ng-app="MyApp" ng-controller="AccountsController">
    <div class="navbar navbar-inverse navbar-fixed-top">
      <label for="User_Name" style="color:red;">{{User_Name}}</label>
      </div>  
</body>

下面是我的AngularJs控制器

var AccountsController = function ($scope, $http, $location,UserService) {
    $scope.User_Name = "";
    $scope.Login_Click = function (UserName, Password) {
        $http.get('/api/AppAccounts/GetAuthenticateUser', { params: { UserName: UserName, Password: Password } }).
          success(function (data) {
              if (data.length > 0) {
                  UserService.isLogged = true; //Angularjs Service
                  UserService.username = data[0].UserName;
                  $scope.User_Name = data[0].UserName;
                  $location.path('/Three');
              }
              else {
                  UserService.isLogged = false;
                  UserService.username = "";
              }
          }).
          error(function (error) {
              UserService.isLogged = false;
              UserService.username = "";
          });
    }
};

我将我的角度应用程序代码放在另一个文件中，并且它与其余页面一起工作正常但是每当我尝试将值赋给布局页面上的标签时，它就不会被分配。我在这做错了什么？任何帮助都将受到高度赞赏。

Answer 1

当MVC呈现您的视图时，它会将您的页面和布局呈现为一个页面。您的角度/客户端javascript代码将在呈现的HTML上执行。您应该能够在页面中的任何位置显示范围属性的值，只要它位于正确设置ng-app和ng-controller的元素内。我试过这个并且工作正常。

尝试使用这些来解决问题。

确保您的ajax调用正常并且执行成功处理程序。

由于您在成功处理程序中将值设置为User_Name属性，因此您需要确保正在执行成功处理程序。您只需在代码的不同部分放置alert/console.log即可查看。

$scope.Login_Click = function (UserName, Password) {
    $http.get('/api/AppAccounts/GetAuthenticateUser', 
                                 { params: { UserName: UserName, Password: Password } }).
      success(function (data) {
          alert('success');
          console.log(data);
          if (data.length > 0) {
              UserService.isLogged = true; //Angularjs Service
              UserService.username = data[0].UserName;
              $scope.User_Name = data[0].UserName;
              $location.path('/Three');
          }
          else {
              alert('data length is zero');
              UserService.isLogged = false;
              UserService.username = "";
          }
      }).
      error(function (error) {
          alert('ajax failed');
          console.log(error);
          UserService.isLogged = false;
          UserService.username = "";
      });
}

确保从api方法返回数组。

在成功处理程序中，您正在读取响应中第一个项目的UserName属性。这意味着，响应应该是一个数组。确保它是一个JSON数组，如下所示。（您可以打开浏览器的开发人员工具 - >网络选项卡，查看您的ajax调用结果。

[
  {
    "UserName": "Test"
  }
]

如果您要从网络API方法发回一个像{ UserName : "Tes"}这样的对象，则应该像

一样访问它

success(function(data){
   $scope.User_Name = data.UserName;
})

确保使用正确的http方法从客户端发送数据。

在您的代码中，您使用的是$http.get方法。这意味着它将向您提供的端点/网址发送Http GET方法。确保您的web api端点对GET方法做出正确响应。您可以通过直接在浏览器中访问URL并在查询字符串

中添加UserName和Password来测试这一点

yoursite.com/api/AppAccounts/GetAuthenticatedUser?UserName=some&Password=test

将GetAuthenticated用户方法保留为GET方法并不是一个好主意。我建议将其更改为HttpPost类型，然后使用客户端代码中的$http.post。

页面中的其他脚本错误。 如果页面中有其他脚本错误，则执行剩余的javascript时会遇到问题。打开浏览器控制台并检查其他脚本错误，如果发现任何错误，请修复它们。

最后，我建议您对$ .post / $。get方法返回的承诺使用done和fail方法。

从jQuery 1.5开始，所有jQuery的Ajax方法都返回了一个超集 XMLHTTPRequest对象。这个jQuery XHR对象，或“jqXHR”， $ .get（）返回实现Promise接口，全部提供 Promise的属性，方法和行为（请参阅Deferred 对象获取更多信息）。 jqXHR.done（）（成功）， jqXHR.fail（）（用于错误）和jqXHR.always（）（用于完成，是否成功或错误）方法采用在调用时调用的函数参数请求终止

$.post( "yoururl", function(res) {
  alert( "success" );
})
.done(function(res) {
    alert( "second success" );
})
.fail(function() {
    alert( "error" );
})

值不会从angularjs控制器MVC分配给布局页面上的标签

1 个答案: