AngularJS组件绑定不起作用

我正在测试我在AngularJS中的第一个组件绑定，但是我不能让它工作，而且我也看不出问题在哪里。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"); 

     } 

    ); 


});

视图-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']);

视图-mostrarDetallesUser.html

<div>{{$ctrl.usuarioIndividual.name}}</div> <!-- it doesn´t work neither with $ctrl nor without it-->

来源

2017-10-04 FranP

当使用结合需要分离大写单词与破折号“ - ”所以它应该看起来像这样：

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

所以我穿上plnker一切，所以你可以检查出来：

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

干杯，

来源

2017-10-05 00:35:32 pegla

它的工作原理！空格实际上不在我的代码中，也许我在这里粘贴错误。为什么我必须在组件标签中使用usuario-individual，但是为了显示每个对象的名称，我必须再次使用{{$ ctrl.usuarioIndividual.name}}？ – FranP

这是正确的，你使用控制器上的变量的大写名称，并且只有在通过绑定使用破折号时才使用模板，类似于在模板中声明组件时在.component（...）上使用大写声明时执行的操作在模板中使用破折号。 – pegla

AngularJS组件绑定不起作用

回答

相关问题