Question

我正在关注AngularJS教程，但我并不了解他们如何将组件链接到视图。我做了一个非常相似的组件：

angular.module('phonecatApp').component('nameList', {
    template:
            '<p ng-repeat="name in $ctrl.names>' +
            '{{names.name}}' +
            '<p>Total number of phones: {{$ctrl.names.length}}</p>' +
            '</p>',
    controller: function NameListController(){
        this.names = [
            {
                name:'BOB'
            }, {
               name:'Rob' 
            }, {
               name:"Nob"
            }
        ];
    }
});

这与：

非常相似

angular.module('phonecatApp').component('phoneList',{
    template:
            '<ul>'+
                '<li ng-repeat="phone in $ctrl.phones">' +
                    '<span>{{phone.name}}</span>' +
                    '<p>{{phone.snippet}}</p>' +
                '</li>' +
            '</ul>',
    controller: function PhoneListController() {
        this.phones = [
            {
              name: 'Nexus S',
              snippet: 'Fast just got faster with Nexus S.'
            }, {
              name: 'Motorola XOOM™ with Wi-Fi',
              snippet: 'The Next, Next Generation tablet.'
            }, {
              name: 'MOTOROLA XOOM™',
              snippet: 'The Next, Next Generation tablet.'
            }
        ];
    }
});

但是在index.html中，我无法显示我的组件。

    <script src="app.js"></script>
    <script src="phone-list.component.js"></script>
    <script src="name-list.component.js"></script>
  </head>
<body>

  <!-- Use a custom component to render a list of phones -->
  <phone-list></phone-list>
  <name-list></name-list>

</body>
</html>

Answer 1

请更正此行代码并再次测试。

'{{name.name}}' +

复制此内容！

angular.module('phonecatApp').component('nameList', {
    template:
            '<p ng-repeat="name in $ctrl.names>' +
            '{{name.name}}' +
            '<p>Total number of phones: {{$ctrl.names.length}}</p>' +
            '</p>',
    controller: function NameListController(){
        this.names = [
            {
                name:'BOB'
            }, {
               name:'Rob' 
            }, {
               name:"Nob"
            }
        ];
    }
});

AngularJS组件不会出现在视图中

1 个答案: