Javascript 使用AngularJS访问.animation中的$scope

我有一个幻灯片显示指令（自制），可以调整-一些变量会发生变化，例如，我有一个包含以下设置的范围变量：

{
 animationSpeed : 30,
 transitionTime : 1.5
}

作为动画库，我使用greensock（GSAP），动画定义如下：

ModuleSlideshow.animation('.slide-left-animation', ['$window',function ($window) {
    "use strict";

    var getScope = function(e){
        var scope = angular.element(e).scope();
        if(scope){ scope = scope.$parent; }
        if(scope){ scope = scope.$parent; }
        return scope;
    };

    return {
        enter: function (element, done) {
            TweenMax.fromTo(element, getScope(element).animationSpeed, {left: -$window.innerWidth, ease : Power4.easeInOut}, {left: 0, ease: Power4.easeInOut, onComplete: done});
        },

        leave: function (element, done) {
            TweenMax.to(element,getScope(element).animationSpeed,{left : $window.innerWidth,ease : Power4.easeInOut, onComplete: done});
        }
    };
}]);

如您所见，我尝试用我得到的元素（元素是一个

.slide

div）获取作用域，然后我向上两次到达父级（以获取正确的变量）

---

这有时有效，但有时无效，我收到一些JavaScript错误，说

“无法读取null的属性$parent”

。我试图直接注入

$scope

，但这似乎不起作用。在我的情况下，您将如何访问scope？我是否应该更改设置动画的方式？

我遇到了一个几乎与您的问题完全相同的问题，我需要访问元素的作用域。它似乎是使用

element.scope（）

可以，但会中断，特别是如果您打算使用

$compileProvider.debugInfoEnabled（false）；

，这是Angular应用程序中为提高性能而建议使用的功能。尽管关闭调试信息时您无法访问元素的范围，但您仍然可以通过

数据（）访问元素的控制器。

也许，如果您重构代码以使用指令的控制器，您将能够访问所需的范围变量

angular.module('myApp')
  .config(['$compileProvider', function ($compileProvider) {
    $compileProvider.debugInfoEnabled(false);
  }])
  .controller('myDirectiveCtrl', function ($scope, $el) {
    this.animationSpeed = $scope.animationSpeed;
  })
  .directive('myDirective', function () {
    return {
      restrict: 'E',
      scope: {
        animationSpeed: '='
      },
      controller: 'myDirectiveCtrl',
      controllerAs: 'vm'
    };
  })
  .animation('.my-directive', function () {
    return {
      addClass: function (element, className, done) {
        var vm = element.data().$myDirectiveController;
        console.log(vm.animationSpeed, className);
      },
      removeClass: function (element, className, done) {
        var vm = element.data().$myDirectiveController;
        console.log(vm.animationSpeed, className);
      }
    }
  })

---

我遇到了一个与您的问题几乎完全相同的问题，我需要访问元素的作用域。似乎使用

element.scope（）；

，建议在Angular应用程序中使用，以提高性能。虽然在关闭调试信息时您无法访问元素的范围，但您仍然可以通过

数据（）访问元素的控制器。

也许，如果您重构代码以使用指令的控制器，您将能够访问所需的范围变量

angular.module('myApp')
  .config(['$compileProvider', function ($compileProvider) {
    $compileProvider.debugInfoEnabled(false);
  }])
  .controller('myDirectiveCtrl', function ($scope, $el) {
    this.animationSpeed = $scope.animationSpeed;
  })
  .directive('myDirective', function () {
    return {
      restrict: 'E',
      scope: {
        animationSpeed: '='
      },
      controller: 'myDirectiveCtrl',
      controllerAs: 'vm'
    };
  })
  .animation('.my-directive', function () {
    return {
      addClass: function (element, className, done) {
        var vm = element.data().$myDirectiveController;
        console.log(vm.animationSpeed, className);
      },
      removeClass: function (element, className, done) {
        var vm = element.data().$myDirectiveController;
        console.log(vm.animationSpeed, className);
      }
    }
  })

---

我尝试了上面的方法；我无法将作用域注入到指令控制器中。我创建了一个服务来进行这样的通信，它工作得很好，我可以保留它们

angular
        .module('App')
        .service('SliderService', function (){
            return {
                direction: null
            };
        });
     angular
        .module("App")
        .directive('slider',slider);

     slider.$inject = ['SliderService'];

        link: function (scope, elem, attrs) { var unbindWatch =  scope.$watch('direction', function () { SliderService.direction = scope.direction }); 

记住用示波器杀死手表和计时器

scope.$on('destroy',function () { unbindWatch() }) }

然后，对于动画，请使用以下命令

angular
    .module("App")
    .animation('.slide-animation', slideAnimation);
slideAnimation.$inject  =['SliderService'];
function slideAnimation ( SliderService) {
    return {
        beforeAddClass: function (element, className, done) {
            if (className == 'ng-hide' && SliderService.direction) { ... }
        }
    }

---

我尝试了上面的方法；我无法将作用域注入到指令控制器中。我创建了一个服务来进行这样的通信，它工作得很好，我可以保留它们

angular
        .module('App')
        .service('SliderService', function (){
            return {
                direction: null
            };
        });
     angular
        .module("App")
        .directive('slider',slider);

     slider.$inject = ['SliderService'];

        link: function (scope, elem, attrs) { var unbindWatch =  scope.$watch('direction', function () { SliderService.direction = scope.direction }); 

记住用示波器杀死手表和计时器

scope.$on('destroy',function () { unbindWatch() }) }

然后，对于动画，请使用以下命令

angular
    .module("App")
    .animation('.slide-animation', slideAnimation);
slideAnimation.$inject  =['SliderService'];
function slideAnimation ( SliderService) {
    return {
        beforeAddClass: function (element, className, done) {
            if (className == 'ng-hide' && SliderService.direction) { ... }
        }
    }

---

为什么在

..'$window'，'$scope'，functio…

中有作用域？它需要在那里吗？尽管您应该只在

..function（$window，$scope）中需要它…

我编辑了我的代码，现在它应该是这样的。这种语法是数组语法。这是minificationcool所必需的，您仍然需要将

$scope

放入以用于每个方法。我想您可以将其保留在

函数（$scope）中{…

我不明白…所以你需要

$scope

和

$window

对吗？所以你需要它们作为

函数（）中的服务

因此，要么在此模块中加载带有特定服务的函数，要么在第一个函数中添加您的服务。我不确定wich是否会工作，或者两者都会工作，但请尝试一下，看看它是否工作。为什么在

中有作用域…“$window”、“$scope”、functio…

？它需要在那里吗？尽管您应该打开它我需要在

…函数（$window，$scope）…中使用它。

我编辑了我的代码，现在它应该是这样的。这种语法是数组语法。这是minificationcool所必需的，您仍然需要将

$scope

放在函数中，以便用于每个方法。我想您可以将它放在

函数（$scope）中{…

我不明白…所以你需要

$scope

和

$window

对吗？所以你需要它们作为

函数（）中的服务

因此，要么在本模块中加载包含特定服务的功能，要么在第一个功能中添加您的服务。tbh我不确定wich是否有效，或者两者都有效，但请尝试一下，看看是否有效。