javascript - 自定义 Angular Directive(指令)未呈现

Question

我正在尝试创建一个指令，但由于某种原因没有任何渲染。屏幕一片空白。

index.html

<div class="main" ng-controller="MainController">
  <div class="container">
    <div class="content">
         <program-listing listing="program"></program-listing>
    </div>
  </div>
</div>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<script src="js/directives/programListing.js"></script>

js/controllers/mainController.js

app.controller('MainController', ['$scope', function($scope) {
  $scope.program = {
    series: "Sherlock",
    series_img: "img/sherlock.jpg",
    genre: "Crime drama",
    season: 3,
    episode: "The Empty Hearse",
    description: "Two years after his reported Reichenbach Fall demise, Sherlock, who has been cleared of all fraud charges against him, returns with Mycroft's help to a London under threat of terrorist attack. John has moved on and has a girlfriend, Mary Morstan. Sherlock enlists Molly to assist him, but when John is kidnapped by unknown assailants and is rescued by Sherlock and Mary, John returns to help find the terrorists and an underground plot to blow up the Houses of Parliament during an all night sitting on Guy Fawkes Night.",
    datetime: new Date(2014, 11, 31, 21, 00, 00, 00)
  };

}]);

js/指令/programListing.js

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

js/directives/programListing.html

  <div class="row">

    <div class="col-md-3" class="series_img">
      {{ listing.series_img }}
    </div>

    <div class="col-md-6">
      <h1 class="series">{{listing.series}}</h1>
      <h2 class="episode">{{listing.episode}}</h2>
      <p class="description">{{listing.description}}</p>
    </div>

    <div class="col-md-3">
      <ul class="list-group">
        <li class="list-group-item"><span>Date:</span> {{listing.datetime | date:'mediumDate' }}  </li>
        <li class="list-group-item"><span>On air:</span> {{ listing.datetime | date:'EEEE' }}  </li>
        <li class="list-group-item"><span>Time:</span>{{ listing.datetime | date:'shortTime' }}  </li>
        <li class="list-group-item"><span>Season:</span> {{listing.season}}  </li>
        <li class="list-group-item"><span>Genre:</span>{{ listing.genre }}  </li>
      </ul>
    </div>

  </div>

为什么没有任何渲染？

Answer 1

templateUrl 是您指令的参数。你不应该在你的范围内。你的指令不知道要渲染什么!

scope = {...},
templateUrl = '...'