指令未呈現，控制台中沒有錯誤

Question

我有一個index.html，其中包含這樣的指令

<script src="/js/directives/rating.js"></script>

然后在某個地方，我在其他視圖中包括html標簽，例如

<div star-rating ng-model="rating.rating1" max="10" on-rating-select="rating.rateFunction(rating)"></div>

但是為什么它不出現？ rating.js如下所示

angular.module('MyApp')
    .directive('star-rating', function(){
        return {
          restrict: 'EA',
          template:
            '<ul class="star-rating"' +
            '  <li ng-repeat="star in stars" class="star" ng-class="{filled: star.filled}" ng-click="toggle($index)">' +
            '    <i class="fa fa-star"></i>' + // or &#9733
            '  </li>' +
            '</ul>',
          scope: {
            ratingValue: '=ngModel',
            max: '=?', // optional (default is 5)
            onRatingSelect: '&?',
          },
          link: function(scope, element, attributes) {
            if (scope.max == undefined) {
              scope.max = 5;
            }
            function updateStars() {
              scope.stars = [];
              for (var i = 0; i < scope.max; i++) {
                scope.stars.push({
                  filled: i < scope.ratingValue
                });
              }
            };
            scope.toggle = function(index) {
                scope.ratingValue = index + 1;
                scope.onRatingSelect({
                  rating: index + 1
                });
            };
            scope.$watch('ratingValue', function(oldValue, newValue) {
              if (newValue) {
                updateStars();
              }
            });
          }
        };
    });

控制台沒有錯誤，我在抓撓頭。

Answer 1

像這樣定義您的指令，以便使用star-rating在您的HTML中起作用：

angular.module('MyApp')
    .directive('starRating', function(){

   ...

}