Question

为内容分级创建可靠的内容。我用过ng-mouseenter和ng-mouseleave。用户可以点击两种类型的内容评级，一种是只读。

当我通过readonly属性时，ng-mouseleave正在工作。但是当我没有通过时，它无法正常工作

基本上我使用ng-mouseenter和ng-mouseleave为它提供悬停效果并消除悬停效果。

这是我的jsfiddle链接

var app = angular.module("glyph", []);

app.controller("contentRatingController", ['$scope', function($scope) {
  $scope.rating1 = 5;
  $scope.rating2 = 2.5;
  $scope.isReadonly = true;
}]);


app.directive('contentRating', function contentRating() {
  var defaults = JSON.parse('{}');
  return {
    restrict: 'E',
    transclude: false,
    require: '',
    scope: {},
    bindToController: {

      ratingValue: "=ngModel",
      max: "@",
      onRatingSelect: "&?",
      readonly: "=?",
      name: "@"
    },
    controller: function() {
      var g = this;
      g.gRatingTemp = g.ratingValue;


      if (g.max == undefined) {
        g.max = 5;
      }

      g.updateStars = function(ratingValue) {
        g.stars = [];
        for (var i = 0; i < g.max; i++) {
          g.stars.push({
            filled: (i < ratingValue),
            halffilled: (ratingValue)
          });
        }
        console.log(g.stars);
      };


      g.updateStars(g.ratingValue);

      g.toggle = function(index) {
        if (g.readonly == undefined || g.readonly == false) {
          g.ratingValue = index + 1;
          console.log("----------toggle--------" + g.ratingValue);
          if (g.gRatingTemp != g.ratingValue) {
            g.gRatingTemp = g.ratingValue;
            g.updateStars(g.ratingValue);
          }
        }
      }

      g.mouseEnter = function(index) {
        console.log("----------mouseEnter--------" + index);
        if (g.readonly == undefined || g.readonly == false) {
          g.updateStars(index + 1);
        }
      };

      g.mouseLeave = function(index) {
        alert("----------mouseLeave--------" + index);
        if (g.readonly == undefined || g.readonly == false) {
          g.updateStars(index + 1);
        }
      };
    },
    compile: function() {
      return {
        pre: function(scope, el, attrs) {
          for (var key in defaults) {
            if (!attrs[key]) {
              attrs[key] = defaults[key];
            }
          }
        },
        post: function(scope, el, attrs) {


        }
      };
    },
    template: '<ul class="rate" ng-class="{readonly: Ctrl.readonly}">   <li ng-repeat="star in Ctrl.stars" class="star"  ng-mouseover="$event.stopPropagation(); Ctrl.mouseEnter($index)" ng-mouseleave="$event.stopPropagation(); Ctrl.mouseLeave($index)">                    <input type="radio" id="{{Ctrl.name}}{{$index}}" name="{{Ctrl.name}}" value="{{$index+1}}" ng-model="Ctrl.ratingValue" ng-click="Ctrl.toggle($index)"/><label for="{{Ctrl.name}}{{$index}}" title="{{$index+1}}" ng-class="{filled:( star.filled && star.halffilled >= $index+1)}"></label>     <input type="radio" id="{{Ctrl.name}}{{$index+1/2}}" name="{{Ctrl.name}}" value="{{$index+1/2}}" ng-model="Ctrl.ratingValue" ng-click="Ctrl.toggle($index-1/2)"/><label class="half" for="{{Ctrl.name}}{{$index+1/2}}" title="{{$index+1/2}}" ng-class="{filled: star.filled}" ></label>    </li></ul><!-- <ul class="star-rating" ng-class="{readonly: Ctrl.readonly}">    <li ng-repeat="star in Ctrl.stars" class="star {{yellowStar}}" ng-class="{filled: star.filled}" ng-click="Ctrl.toggle($index)" ng-mouseenter="Ctrl.mouseEnter($index)" ng-mouseleave="Ctrl.mouseLeave($index)">     <span>           <i class="fa fa-star"></i>        </span>    </li></ul> -->',
    controllerAs: 'Ctrl',
  };
});

ng-mouseleave事件不起作用吗？

0 个答案: