Question

我从POST获得响应，它在控制台中打印数据，但它没有在html页面中显示数据。

我有我的控制器，只是{{user}}没有在html页面中显示

我可以在控制台中看到它返回的内容，

    angular.module('app.AllUsersCtrl', [])
    .controller('AllUsersCtrl', function ($scope, $http, $cookies, $window, $state) {
        $scope.getAccount = function (n) {
            $http({
                method: 'POST',
                url: '/FYPapp/getAccount',
                data: $.param({
                    username: n
                }),
                headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
            }).success(function (data, status, headers, config) {
                console.log(JSON.stringify(data));
                $scope.user = JSON.stringify(data);
            });

        };
    });

**数据返回**

scripts.js:95 {"id":118,"firstname":"Lauren","lastname":"Smithss","description":"the Makup Chair the.....","enabled":true,"user":{"userid":21,"username":"theMak","email":"theMak22@mail.com","password":"995bf49114defd4f35d10e477135b89112ecdc2f25af6ab7969112842919ba4dc193b194f9485671","enabled":true},"followers":[],"username":"theMak"}

HTML：这是html页面

<link rel="stylesheet" type="text/css" href="static/app/css/css.scss">
<div class="mainDiv">

<h1> Profile Details</h1>
    {{user}}

</div>

Answer 1

在您的HTML中，您需要使用ng-controller以及ng-app定义我们的控制器，这将是您的模块名称。

然后你需要进行数据通话。

之后，您可以直接将数据分配到范围内，如下所示：

$scope.user = data;

Answer 2

因为它appears你正在使用控制器别名，即

.state('profile', {
  url: "/profile",
  templateUrl: '/views/profile.html',
  controller: 'AllUsersCtrl',
  controllerAs: 'allusers' // this one here
})

您应该为控制器实例分配方法和属性，例如

.controller('AllUsersCtrl', ['$http', function($http) {
  var ctrl = this;
  this.getAccount = function(n) {
    $http(...).then(function(response) {
      ctrl.user = response.data;
    });
  };
}])

并在您的模板中......

<img ng-click="allusers.getAccount(something)"...

和

<h1>Profile Details</h1>

<!-- for debugging -->
<pre>{{allusers.user | json}}</pre>

<!-- or for prod -->
<p>{{allusers.user.firstname}} {{allusers.user.lastname}}</p>

Answer 3

您的html模板中缺少ng-controller。

<h1> Profile Details</h1>
{{user}}

Angularjs $ scope.data没有在html中显示

3 个答案: