I am currently experimenting with component binding in AngularJS for the first time. Unfortunately, I am facing some challenges as I am unable to get it to work correctly and pinpoint where the issue lies.
In this scenario, I have two components: one is responsible for fetching a list of users, while the other displays details of each user. The second component should be nested within the view of the first component, but despite my efforts, no user details are being displayed (specifically, only the name).
Below is the relevant code snippet:
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>
At the moment, I have created a directory named "miscomponentes" containing both components, each consisting of a .js file for the component logic and an .html file for the corresponding view.
First component code:
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-->
Second component code (the one included in the last view)
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 seem to work whether using $ctrl or not-->