Question

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

Answer 1

当你使用绑定时，你需要用大写“ - ”分隔大写单词，所以它应该是这样的：

<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

干杯，

AngularJS组件绑定不起作用

1 个答案: