Question

我正在关注此https://github.com/rpocklin/angular-scroll-animate，但我的控制台出错：

错误：指令：angular-scroll-animate'when-visible'属性必须指定一个函数。

的index.html

     <section ng-controller="Section1Controller" >
          <div class="container" when-visible="animateElementIn" when-not-visible="animateElementOut" class="hidden">
            <h3 class="section-title">{{titresection}}</h3>
            <div class="line-section"></div>
            <div class="section-thumb"><img ng-src="../assets/images/avatar.jpg">
              <p class="section-contenue">{{paragraphe}}</p>
            </div>
          </div>   
        </section>

controller.html

apps.controller('Section1Controller', function ($scope) {

      $scope.titresection="Développeur frontend & backend";
      $scope.image='../assets/images/avatar.jpg';
      $scope.lefttitle=" 2016";
      $scope.paragraphe="éveloppeur frontend, qui développe des sites vitrines sous WordPress et des dernières techniques web : HTML5/CSS3, jQuery, jQuery UI,NodeJs,AngularJs.";

     $scope.animateElementIn = function($el) {
    $el.removeClass('hidden');
    $el.addClass('animated fadeInUp'); // this example leverages animate.css classes
  };

  $scope.animateElementOut = function($el) {
    $el.addClass('hidden');
    $el.removeClass('animated fadeInUp'); // this example leverages animate.css classes
  };
/*

  });

Answer 1

<强>更新我添加了一个jsfiddle。见here。它工作正常。你的模板很好看。其他地方一定有错误。我希望你已经包含了animate.css。如果您可以共享代码的jsfiddle / plunker，它将帮助我们解决问题。

我滚动浏览angular-scroll-animate的代码，发现when-visible和when-not-visible实际上是对函数的引用。

controller: ['$scope', function(scope) {
        if (!scope.whenVisible || !angular.isFunction(scope.whenVisible())) {
          throw new Error('Directive: angular-scroll-animate \'when-visible\' attribute must specify a function.');
        }

        if (scope.whenNotVisible && !angular.isFunction(scope.whenNotVisible())) {
          throw new Error('Directive: angular-scroll-animate \'when-not-visible\' attribute must specify a function.');
        }
        else if (!scope.whenNotVisible) {
          scope.whenNotVisible = function() {
            return angular.noop;
          };
        }

        if (scope.delayPercent) {

          var delayPercent = parseFloat(scope.delayPercent);

          if (!angular.isNumber(delayPercent) || (delayPercent < 0 || delayPercent > 1)) {
            throw new Error('Directive: angular-scroll-animate \'delay-percent\' attribute must be a decimal fraction between 0 and 1.');
          }
        }
    }],

以下无法使用 你需要使用

  <div class="container" when-visible="animateElementIn()" when-not-visible="animateElementOut()" class="hidden">

因为它们是功能

指令：属性必须指定一个函数

1 个答案: