无法在动画功能中的 AngularJS 控制器之外访问 $scope 属性

Question

angular.module("modalApp", ['ngAnimate', "ngMaterial", "ngMessages"])
    .controller('modalCtrl', function ($scope) {
  $scope.direction = 'left';
        $scope.currentIndex = 0;
  $scope.init = true;
  $scope.initWizard = function() {
   if($scope.init) { 
    $scope.setCurrentIndex(0); 
   } 
   $scope.init = false;  
  }

        $scope.setCurrentIndex = function (index) {
            $scope.currentIndex = index;
        }
  
        $scope.isCurrentIndex = function (index) {
            return $scope.currentIndex === index;
        }

        $scope.nextModalStep = function () {
            $scope.direction = 'left';
            if($scope.currentIndex < $scope.modalSteps.length - 1) {
    ++$scope.currentIndex;
   } 
        }

        $scope.prevModalStep = function () {
            $scope.direction = 'right';
            if($scope.currentIndex > 0) {
    --$scope.currentIndex;
   } 
        }
    })
    .animation('.modalViewAnimation', function () {
        return {
   beforeAddClass: function(element, className, done) {
    var scope = element.scope();
    if (className == 'ng-hide') {
     var elementWidth = element.parent().width();
     startPoint = 0;
     if(scope.direction !== "right") {
      finishPoint = elementWidth;
     } else {
      finishPoint = -elementWidth;
     }
     TweenMax.fromTo(element, 0.5, { left: startPoint}, {x: finishPoint, onComplete: done });
    } else {
     done();
    }
   },
   removeClass: function(element, className, done) {
    var scope = element.scope();
    if (className == 'ng-hide') {
     var elementWidth = element.parent().width();
     finishPoint = 0;
     if(scope.direction !== "right") {
      startPoint = elementWidth;
     } else {
      startPoint = -elementWidth;
     }
     TweenMax.to("section", 0.5, { height: element.outerHeight()});
     TweenMax.fromTo(element, 0.5, { x: startPoint}, {x: finishPoint, onComplete: done, delay:0.25});
    } else {
     done();
    }
   }
        }
 });

I have a wizard slider that is almost working. My problem is accessing the direction property in my animation function after it has been set in the controller. The scope object has value inside the animation but the dot notation of retrieving the direction property with "scope.direction" returns undefined. Why? Any help greatly appreciated. Worth mentioning, I modified the animation function ever so slightly from this https://github.com/simpulton/angular-photo-slider to achieve what I want. I can't see why my scope.direction returns undefined?

Answer 1

不确定原因，但我必须从 childHead 那里得到它。对我来说关键是注入 rootScope。工作示例：JSFiddle （编辑为 'tidy' 我的代码 ;-) ）

var myApp = angular.module('myApp', ['ngAnimate']);

myApp.controller('myCtrl', function($scope) {
  $scope.onOff = false;
});

myApp.animation('.fold-animation-expand', ['$animateCss', '$rootScope',
  function($animateCss, $rootScope) {
    return {
      enter: function(element, doneFn) {
        console.log("onOff:" + $rootScope.$$childHead.onOff);
        return $animateCss(element, {
          from: {
            "font-size": '0px'
          },
          to: {
            "font-size": '20px'
          },
          duration: 2
        });
      }
    }
  }
]);

.box {
  height: 100px;
  width: 100px;
  background-color: blue;
  color: white;
  float: left;
}
.box.ng-enter {
  transition: 2s linear all;
  opacity: 0;
}
.box.ng-enter.ng-enter-active {
  opacity: 1;
}

<html ng-app="myApp">

<head>
  <script src="http://code.jquery.com/jquery-2.2.1.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.5.0/angular-animate.js"></script>
</head>

<body>
  <div ng-controller='myCtrl'>
    onOff state:{{onOff}}
    <br>
    <br>
    <button ng-click="onOff?onOff=false:onOff=true">Run animation</button>
    <hr>

    <div ng-if="onOff == true" class="fold-animation-expand" style="font-size:0px">
      Expanding element
    </div>

    <hr>Example of CSS-based transition
    <br>
    <div ng-if="onOff" class="box">Animated Box</div>

  </div>
</body>

</html>

无法在动画功能中的 AngularJS 控制器之外访问 $scope 属性

Not able to access $scope property outside AngularJS controller in animation function

angularjs

ng-animate