Javascript AngularJS组件绑定没有´；行不通_Javascript_Angularjs_Binding_Components

Javascript AngularJS组件绑定没有´；行不通

javascript angularjs binding

Javascript AngularJS组件绑定没有´；行不通,javascript,angularjs,binding,components,Javascript,Angularjs,Binding,Components,我正在用AngularJS测试我的第一个组件绑定，但我无法让它工作，我也看不出问题出在哪里我有两个组件：一个用于获取用户列表，另一个用于显示每个用户的详细信息。第二个组件必须在第一个组件的视图中，但没有显示任何内容，没有用户的详细信息（在本例中，只有名称）守则： index.html <html ng-app="mainMod"> <head> <link rel="stylesheet" type="text/css" href="micss.cs

我正在用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>

<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-->

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

查看mostrarListado.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>

<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-->

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

查看mostrardellesuser.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>

<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-->

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

{{$ctrl.usuarioIndividual.name}

使用绑定时，需要用破折号“-”分隔大写单词，因此它应该如下所示：

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

所以我把所有东西都放在了plnker上，这样你就可以查看它了：

干杯，

它起作用了！空白区域实际上不在我的代码中，也许我粘贴错了。为什么我必须在组件标记中使用usuario individual，但为了显示每个对象的名称，我必须再次使用{{$ctrl.usuarioIndividual.name}}？这是正确的，在控制器上的变量上使用大写名称，只有在通过绑定时才在模板中使用破折号，类似于在模板中声明组件时所做的操作，在.component（…）上使用大写声明，然后在模板中使用破折号。