使用 AngularJS 指令时数据未显示在视图中

Question

我尝试使用指令在我的视图中显示控制器数据，但没有任何显示，控制台中也没有错误。我能够记录数据，但数据不会显示在视图中。我是否以正确的方式使用指令？如何在视图中显示数据？谢谢。

index.html

  <body ng-app="GameboardApp">
    <div class="header">
      <h1 class="logo">GameBoard</h1>
    </div>

    <div class="main" ng-controller="ScoreController">
      <div class="container">
        
        <div class="row" >
          <game ng-repeat="score in scores" info="score"></game>
        </div>
      
      </div>
    </div>
    
    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/ScoreController.js"></script>

    <!-- Directives -->
    <script src="js/directives/game.js"></script>

App.js

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

控制器得分控制器：

app.controller('ScoreController', ['$scope', function($scope) {
    $scope.scores = [
      {
        datetime: 1420848000000,
        visitor_team: {
          city: "Charlotte",
          name: "Hornets"
        },
        home_team: {
          city: "New York",
          name: "Knicks"
        },
        period: "Final",
        visitor_score: 110,
        home_score: 82
      },,
          ...
      },
      {
        datetime: 1420848000000,
        visitor_team: {
          city: "Orlando",
          name: "Magic"
        },
        home_team: {
          city: "Portland",
          name: "Trail Blazers"
        },
        period: "First Quarter",
        visitor_score: 13,
        home_score: 26
      }    
    ];
    console.log($scope.scores);  
  }]);

指令

game.js

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

game.html

<div class="col-sm-4">
    <div class="row scorecard">
      <p class="period">{{info.period}}</p>
      <div class="visitor col-xs-4">
        <h2 class="visitor-score">{{info.visitor_score}}</h2>
        <h3>
          <span class="visitor-city">{{info.visitor_team.city}}</span><br/>
          <span class="visitor-name">{{info.visitor_team.name}}</span>
        </h3>
      </div>
      <div class="dash col-xs-3">
        <h2>-</h2>
      </div>
      <div class="home col-xs-4">
        <h2 class="home-score">{{info.home_score}}</h2>
        <h3>
          <span class="home-city">{{info.home_team.city}}</span><br/>
          <span class="home-name">{{info.home_team.name}}</span>
        </h3>
      </div>
    </div>

Answer 1

在您创建指令的 game.js 文件中，您拼错了字段名称。应该是 scope 而不是 score.

使用 AngularJS 指令时数据未显示在视图中

Data does not show in view using AngularJS directives

javascript

angularjs