【发布时间】：2018-03-16 11:23:42
【问题描述】：
我正在 AngularJS 中测试我的第一个组件绑定，但我无法让它工作，而且我看不出问题出在哪里。
我有两个组件：一个用于获取用户列表，另一个用于显示每个用户的详细信息。第二个组件必须在第一个组件的视图内，但没有显示任何内容，没有用户的详细信息（在这种情况下，只有名称）。
代码：
index.html
<html ng-app="mainMod">
<head>
<link rel="stylesheet" type="text/css" href="micss.css"/>
</head>
<body>
<comp-mostrar-listado></comp-mostrar-listado>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="./miscomponentes/mostrarListado/mostrarListado.js"> </script>
<script src="./miscomponentes/mostrarDetallesUser/mostrarDetallesUser.js"></script>
</body>
</html>
现在我有一个名为“miscomponentes”的文件夹，其中包含两个组件，每个组件都包含一个包含组件的 .js 文件和一个用于视图的 .html 文件。
第一个组件代码：
mostrarListado.js
var modListado=angular.module('modMostrarListado',[] );
modListado.component('compMostrarListado',{
controller:'contMostrarListado',
controllerAs:'listado',
templateUrl:'./miscomponentes/mostrarListado/view-mostrarListado.html'
});
modListado.controller('contMostrarListado',function($http){
var vm=this;
var peticion=$http.get('http://jsonplaceholder.typicode.com/users');
peticion.then(
function(respuesta)
{
vm.lista=respuesta.data;
},
function(respuesta)
{
alert("error");
}
);
});
view-mostrarListado.html
<div ng-repeat="item in listado.lista" >{{item.name}}</div> <!--this works-->
<comp-mostrar-detalles-user ng-repeat="item in listado.lista" usuarioIndividual="item"></comp-mostrar-detalles-user><!--this doesn´t work-->
第二个组件代码（进入最后一个视图）
mostrarDetallesUser.js
var moduloMostrarDetallesUser=angular.module('modMostrarDetallesUser',[]);
moduloMostrarDetallesUser.component('compMostrarDetallesUser',{
bindings:{
usuarioIndividual:'='
},
templateUrl:'./miscomponentes/mostrarDetallesUser/view-mostrarDetallesUser.html'
});
angular.module("mainMod",['modMostrarListado','modMostrarDetallesUser']);
view-mostrarDetallesUser.html
<div>{{$ctrl.usuarioIndividual.name}}</div> <!-- it doesn´t work neither with $ctrl nor without it-->
【问题讨论】：
标签： javascript angularjs binding components