Question

我想使用angular创建一个动态页面，用户登录后会看到他的用户图片和json文件通过http请求收取的一些信息。这是我执行http请求的模块：

         'user strict';

angular.
 module('userIssue').
 component('userIssue',{
    templateUrl: 'user-issue/user-issue.html',
    controller: 'userIssueCtrl'
 })

.controller('userIssueCtrl',['$scope','$http','$routeParams',function       userIssueCtrl($scope,$http,$routeParams){
var self = this;
var percorso;
$scope.utente=$routeParams.username;
document.title="Benvenuto"+" "+$routeParams.username;



$http.get('user/'+ $routeParams.username+'.json').then(function(response){
  self.utenti = response.data;

});

$http.get('user/'+$routeParams.username+'.info.json').then(function(qualcosa){
  self.d = qualcosa.data;
});

self.show = function(){
  $scope.showForm='false';
}

}]);

这是html页面无法正常工作的部分：

 <div class="col-sm-4">  
 <img  style="position:center;" ng-src="{{$ctrl.d.imgUrl}}" class="img-circle" alt="user image"></div>

我在代码的这一部分使用相同的approch：

<div  class="col-md-9 col-sm-9" id="issueColumn" >
<div id="issue" ng-repeat='utenti in $ctrl.utenti'>
               <li>
<dt>CODICE OPERAZIONE</dt>
<dd>{{utenti.id}}</dd>
<dt>DESCRIZIONE PROBLEMA</dt>
<dd>{{utenti.description}}</dd>
<dt>DATA SEGNALAZIONE</dt>
<dd>{{utenti.forward}}</dd>
<dt>IL PROBLEMA SARà RISOLTO ENTRO IL:</dt>
<dd>{{utenti.endstimed}}</dd>
<dt>STATO DEL PROBLEMA:</dt>
<dd>{{utenti.stato}}</dd>
</li> </br>
</div>
</div>

在这里工作！那么为什么数据绑定对图像不起作用呢？有人能温柔地解释我为什么吗？

这是我用于图像的json文件：

   [
 {
   "imgUrl": "img/Filippo.png",
   "ciao": "ciao_calro"
 }
   ]

Answer 1

如果你想使用d数组对象的第一个元素，你应该明确地访问imgUrl属性的第一个元素。

ng-src="{{$ctrl.d[0].imgUrl}}"

Answer 2

您好，您可以尝试从代码中进行以下更改，并告诉我们，

使用控制器对象引入controllerAs：

组分（＆＃39; userIssue＆＃39; { templateUrl：＆＃39; user-issue / user-issue.html＆＃39;， controllerAs：＆＃39; userCtrl＆＃39; controller：＆＃39; userIssueCtrl＆＃39; }）

通过控制器对象名称访问：

尝试通过控制器对象名称访问，如

{{ userCtrl.d.imgUrl }}。

数据绑定中的$ ctrl不起作用

2 个答案: