自定義角度指令未渲染

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