Question

我正在尝试通过songInfo.js和songInfo.html指令显示存储在MainController中的歌曲的信息，这些指令显示在index.html的bootstrap表中。现在只显示表头。任何帮助将不胜感激！

的index.html：

<body ng-app="Hypalytics">

        <div class="main" ng-controller="MainController"></div>
        <div class="container">
          <h2 class="table">Hover Rows</h2>        
          <table class="table table-hover">
            <thead>
              <tr>
                <th>Rank</th>
                <th>Song</th>
                <th>Artist</th>
                <th>Velocity</th>
                <th>Days on Chart</th>
                <th>Label</th>
              </tr>
            </thead>
            <tbody>
                <tr ng-repeat="song in songs">
                    <td><song-info info="song"></song-info></td>
                </tr>
            </tbody>    
          </table>
        </div>

MainController：

app.controller('MainController', ['$scope', function($scope) {
    $scope.songs = [
        {
            title: 'Trap Queen',
            artist: 'Fetty Wap',
            label: 'Warner Music',
            velocity: 3,
            days: 5,
            rank: 1,
        },
        {
            title: 'Sorry',
            artist: 'Justin Beiber',
            label: 'Warner Music',
            velocity: 17,
            days: 4,
            rank: 2,
        },
        {
            title: 'Reaper',
            artist: 'Sia',
            label: 'Ultra Records',
            velocity: 56,
            days: 7,
            rank: 3,
        }
    ];
}]);

songInfo.html：

<td class="rank">{{ song.rank }}</td>
<td class="title">{{ song.title }}</td>
<td class="artist">{{ song.artist }}</td>
<td class="velocity">{{ song.velocity }}</td>
<td class="days">{{ song.days }}</td>
<td class="label">{{ song.label }}</td>

songInfo.js

app.directive('songInfo', function() {
    return {
        restrict: 'E',
        scope: {
            info: '='
        },
        templateUrl: 'js/directives/songInfo.html'
    };
});

app.js

var app = angular.module('Hypalytics', []);

Answer 1

所以，问题是：具有“ng-controller”的div没有包装内容。这样，您就无法访问MainController，因此“歌曲”为空。

指令中也存在问题。您正在接收“信息”，但在模板中使用“歌曲”。那也行不通。

Answer 2

    <div class="main" ng-controller="MainController"></div>
    <div class="container">
      <h2 class="table">Hover Rows</h2>        
      <table class="table table-hover">
        <thead>
          <tr>
            <th>Rank</th>
            <th>Song</th>
            <th>Artist</th>
            <th>Velocity</th>
            <th>Days on Chart</th>
            <th>Label</th>
          </tr>
        </thead>
        <tbody>
            <tr ng-repeat="song in songs">
               <td>{{ song.rank }}</td>
               <td>{{ song.title }}</td>
               <td>{{ song.artist }}</td>
               <td>{{ song.velocity }}</td>
               <td>{{ song.days }}</td>
               <td>{{ song.label }}</td>
            </tr>
        </tbody>    
      </table>
    </div>

如何使用Angularjs在bootstrap表中显示信息

2 个答案: