Angularjs &引用；控制器为；语法不适用于ng repeat

我试图使用带有

ng repeat

的“controller as”，但无法访问html中的数据。下面是代码片段：

控制器js：

angular.module('myApp')
.controller('reportController', function (reportCandidate) {
    reportCandidate.query(function(response){
      //$scope.candidateInfo = response;
      this.candidateInfo=response;
    })
})

.factory('reportCandidate', ['$resource', function ($resource) {
         return $resource('http://localhost:3000/records', {});;
    }]);

app.js：

'use strict';
angular.module('myApp', [
  'ui.router',
  'ngResource',
  'myApp.version'
])
.config(['$urlRouterProvider','$stateProvider', function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/viewDashboard');
    $stateProvider.state('viewReport', {
        url: '/viewReport',
        templateUrl: '../viewReport/viewReport.html',
        controllerAs: 'report',
        controller: 'reportController'
    });
}]);

HTML:

{{data.name}
{{data.profession}
{{data.skill}
{{data.exp}
{{data.gender}

---

我应该在html中更改哪些内容以显示数据？

您应该使用

控制器作为
变量（此处
报告
），同时查看

 <tr ng-repeat="data in report.candidateInfo">
            <td>{{data.name}}</td>
            <td>{{data.profession}}</td>
            <td>{{data.skill}}</td>
            <td>{{data.exp}}</td>
            <td>{{data.gender}}</td>
 </tr>

您应该将
控制器用作
变量（此处为
报告
），同时还可以查看

 <tr ng-repeat="data in report.candidateInfo">
            <td>{{data.name}}</td>
            <td>{{data.profession}}</td>
            <td>{{data.skill}}</td>
            <td>{{data.exp}}</td>
            <td>{{data.gender}}</td>
 </tr>

您必须使用模板中的
controlleras
对象来访问控制器变量。在您的情况下，使用
report.candidateInfo
其中
report
是您的控制器对象

<tr ng-repeat="data in report.candidateInfo">
    <td>{{data.name}}</td>
    <td>{{data.profession}}</td>
    <td>{{data.skill}}</td>
    <td>{{data.exp}}</td>
    <td>{{data.gender}}</td>
</tr>


{{data.name}
{{data.profession}
{{data.skill}
{{data.exp}
{{data.gender}

有关更多详细信息，您可以查看。
您必须使用模板中的
controlleras
对象来访问控制器变量。在您的情况下，使用
report.candidateInfo
其中
report
是您的控制器对象

<tr ng-repeat="data in report.candidateInfo">
    <td>{{data.name}}</td>
    <td>{{data.profession}}</td>
    <td>{{data.skill}}</td>
    <td>{{data.exp}}</td>
    <td>{{data.gender}}</td>
</tr>


{{data.name}
{{data.profession}
{{data.skill}
{{data.exp}
{{data.gender}

有关更多详细信息，您可以查看。
您正在使用
controllerAs:“报告”

因此，在html中，您需要使用

在绑定到$scope时起作用
您正在使用
controllerAs:“报告”

因此，在html中，您需要使用

在绑定到$scope时起作用
//如果您没有在路由中告诉ng controller=“reportController as report”
{{data.name}
{{data.profession}
{{data.skill}
{{data.exp}
{{data.gender}
angular.module（'myApp'）
.controller（'reportController'，函数（reportCandidate）{
var self=这个；
reportCandidate.query（函数（响应）{
//$scope.candidateInfo=响应；
self.candidateInfo=响应；
})
})
.factory（'reportCandidate'，['$resource'，function（$resource）{
返回$resource（'http://localhost:3000/records', {});;
}]);
app.js：
"严格使用",；
角度.module（'myApp'[
“ui.router”，
“ngResource”，
“myApp.version”
])
.config（['$urlRouterProvider'，'$stateProvider'，函数（$urlRouterProvider，$stateProvider）{
$urlRouterProvider。否则（'/viewDashboard'）；
$stateProvider.state（'viewReport'{
url:“/viewReport”，
templateUrl:“../viewReport/viewReport.html”，
controllerAs:'报告'，
控制器：“reportController”
});
}]);
//如果您没有在路由中告诉ng controller=“reportController as report”
{{data.name}
{{data.profession}
{{data.skill}
{{data.exp}
{{data.gender}
angular.module（'myApp'）
.controller（'reportController'，函数（reportCandidate）{
var self=这个；
reportCandidate.query（函数（响应）{
//$scope.candidateInfo=响应；
self.candidateInfo=响应；
})
})
.factory（'reportCandidate'，['$resource'，function（$resource）{
返回$resource（'http://localhost:3000/records', {});;
}]);
app.js：
"严格使用",；
角度.module（'myApp'[
“ui.router”，
“ngResource”，
“myApp.version”
])
.config（['$urlRouterProvider'，'$stateProvider'，函数（$urlRouterProvider，$stateProvider）{
$urlRouterProvider。否则（'/viewDashboard'）；
$stateProvider.state（'viewReport'{
url:“/viewReport”，
templateUrl:“../viewReport/viewReport.html”，
controllerAs:'报告'，
控制器：“reportController”
});
}]);
由于以下行，您的方法不起作用：
this.candidateInfo=response

您正在将回调函数作为
查询
函数的参数传递。在回调函数的主体中，
这个
指向的是
窗口
，而不是您的控制器

 angular.module('myApp')
 .controller('reportController', function (reportCandidate) {
  var vm = this;
   reportCandidate.query().$promise.then(
      function (response) {
       vm.candidateInfo=response; 
    }
   })
 })

这就是为什么
var vm=this+
vm.candidateInfo=响应方法工作正常-您将所需的引用存储为一个单独的变量。
您的方法不工作，因为以下行：
this.candidateInfo=response

您正在将回调函数作为
查询
函数的参数传递。在回调函数的主体中，
这个
指向的是
窗口
，而不是您的控制器

 angular.module('myApp')
 .controller('reportController', function (reportCandidate) {
  var vm = this;
   reportCandidate.query().$promise.then(
      function (response) {
       vm.candidateInfo=response; 
    }
   })
 })

这就是为什么
var vm=this+
vm.candidateInfo=响应方法工作正常-您可以将所需的引用存储为单独的变量。
谢谢！！但是我已经试过这个了。但是不起作用：（请控制台
response
并查看显示内容？我得到了响应所需的数据。但是无法在html上访问相同的数据。你能显示它吗？我已经添加了有问题的内容。。请检查谢谢！！但是我已经试过这个了。但是不起作用：（请控制台
response
并查看显示内容？我正在获取响应所需的数据。但无法在html上访问相同的数据。您可以显示它吗？我已添加了相关内容。请选中use
report.candidateInfo
use
report.candidateInfo