CODEWITHSUNDEEP
javascriptangularjsbindingcomponents
user6791921
user6791921

Reputation:

AngularJS component binding doesn´t work

I am testing my first component binding in AngularJS, but I can´t make it work, and I can´t see where is the issue.

I have two components: one to get an user list, and the other to show each user´s details. The second component must be inside the first component´s view, but nothing is shown, no user´s details (in this case, only the name).

The code:

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>

Now I have one folder called "miscomponentes" with the two components, each one consisting on an .js file with the component and an .html file for the 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 into 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 work neither with $ctrl nor without it-->

Upvotes: 1

Views: 1502

Answers (1)

pegla
pegla

Reputation: 1866

When you are using binding you need to separate capitalized words with dashes "-" so it should look like this:

<comp-mostrar-detalles-user ng-repeat="item in listado.lista"  usuario-individual="item"></comp-mostrar-detalles-user>

So I've put everything on plnker so you can check it out:

http://plnkr.co/edit/ABzmuC6rR1FyMptFSzO7?p=preview

Cheers,

Upvotes: 1

Related Questions