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 /控制器/ 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 /指令/ 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 = '...'

自定义角度指令不呈现

1 个答案: