Angular指令使用ng-class来显示hide元素

Question

我想在mouseenter上显示隐藏指针模板中的元素。 这是我的指示：

angular.module('myApp')
.directive("addToRoutes",['$http', '$timeout', function($http, $timeout) { 
    return {
        template: '<div><a class="btn btn-default btn-round" ng-click="copy()" ng-mouseenter="showText()" ng-mouseleave="hideText()">\
            <span class="icon icon-spinner icon-spin hidden" ng-class="{hidden : !loading}"></span>\
            <span class="icon icon-plus"   ng-class="{hidden : (loading || copied)}"></span>\
            <span class="icon icon-check hidden" ng-class="{hidden : !copied}"></span>\
            <span class="hidden" ng-class="{hidden : !showFull}">Nach mein Routen Kopieren</span></a></div>\
        ',
        replace: true,
        restrict: 'AE',
        scope: {},
        link: function($scope, element, attrs) {   
            var routeId = attrs.route;
            $scope.loading = false;
            $scope.copied = false;
            $scope.showFull = true;

            $scope.showText = function(){
                $scope.showFull = true;
            }

            $scope.hideText = function(){
                $scope.showFull = false;
            }

            $scope.copy = function(){

            }

        }
    }
}])

显示/隐藏工作，但仅在第二次迭代时，所以当我进入，离开然后输入。 我觉得它与范围变量有关。

我该怎么做？

Answer 1

要在第一次迭代中使用此功能，请将$scope.showFull设置为false

示例：http://plnkr.co/edit/g5gWfSOrQDaNbYDQPgyS?p=preview

.directive("addToRoutes", function($http, $timeout) {
  return {
    template: '<div><a class="btn btn-default btn-round" ng-click="copy()" ng-mouseenter="showText()" ng-mouseleave="hideText()">\
            <span class="icon icon-spinner icon-spin hidden" ng-class="{hidden : !loading}"></span>\
            <span class="icon icon-plus"   ng-class="{hidden : (loading || copied)}"></span>\
            <span class="icon icon-check hidden" ng-class="{hidden : !copied}"></span>\
            <span class="hidden" ng-class="{hidden : !showFull}">Nach mein Routen Kopieren</span></a></div>\
        ',
    replace: true,
    restrict: 'AE',
    scope: {},
    link: function($scope, element, attrs) {
      var routeId = attrs.route;
      $scope.loading = false;
      $scope.copied = false;
      $scope.showFull = false;

      $scope.showText = function() {
        $scope.showFull = true;
      }

      $scope.hideText = function() {
        $scope.showFull = false;
      }

      $scope.copy = function() {

      }

    }
  }
});