自定义角度指令未渲染

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 / directives / 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 = '...'