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-->
答
当使用结合需要分离大写单词与破折号“ - ”所以它应该看起来像这样:
<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
干杯,
它的工作原理!空格实际上不在我的代码中,也许我在这里粘贴错误。为什么我必须在组件标签中使用usuario-individual,但是为了显示每个对象的名称,我必须再次使用{{$ ctrl.usuarioIndividual.name}}? – FranP
这是正确的,你使用控制器上的变量的大写名称,并且只有在通过绑定使用破折号时才使用模板,类似于在模板中声明组件时在.component(...)上使用大写声明时执行的操作在模板中使用破折号。 – pegla