指令不呈现，控制台没有错误

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

像这样定义您的指令，以便在您的HTML中使用星级评分：

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

   ...

}