我正在 AngularJS 中测试我的第一个组件绑定(bind)，但我无法让它工作，而且我看不出问题出在哪里。
我有两个组件:一个用于获取用户列表，另一个用于显示每个用户的详细信息。第二个组件必须在第一个组件的 View 内，但不会显示任何内容，也不会显示用户的详细信息(在本例中，只有名称)。
代码:
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 文件和一个用于 View 的 .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-->
第二个组件代码(那个进入最后一个 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-->
最佳答案
当您使用绑定(bind)时，您需要用破折号“-”分隔大写单词，因此它应该如下所示:
<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
干杯，
关于javascript - AngularJS 组件绑定(bind)不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46575493/