AngularJS 組件綁定不起作用

Question

我正在 AngularJS 中測試我的第一個組件綁定，但我無法讓它工作，我看不出問題出在哪里。

我有兩個組件：一個用於獲取用戶列表，另一個用於顯示每個用戶的詳細信息。 第二個組件必須在第一個組件的視圖內，但沒有顯示任何內容，沒有用戶的詳細信息（在這種情況下，只有名稱）。

編碼：

索引.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 個解決方案

解決方案1
2 已采納 2017-10-05 00:35:32

AngularJS 組件綁定不起作用

問題描述

1 個解決方案

解決方案1 2 已采納 2017-10-05 00:35:32

解決方案1
2 已采納 2017-10-05 00:35:32