指令：屬性必須指定一個功能

Question

我下面這個https://github.com/rpocklin/angular-scroll-animate但我在控制檯得到一個錯誤：

Error: Directive: angular-scroll-animate 'when-visible' attribute must specify a function.

的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"> 

因爲它們的功能