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組件綁定不起作用

回答

相關問題