角度スライダーディレクティブは、私は私のウェブサイトにこのディレクティブを追加したい

Question

作業しない：angular-slider

問題は、それが動作していないです。ここでは、コードです：

ビュー：

 .... 
     <div class="col-sm-12 col-md-3 toggle-slide landing-square" ng-click="open_question = !open_question"> 
     <div class="inner-content"> 
     </div> 
    </div> 
</div> 
<div class="row toggle-slide"> 
    <div class="black-line col-xs-12" ng-show="!scrolled"> 
     <div class="black-box"></div> 
    </div> 
    <div slider="open_question" class='col-xs-12 three-questions slideable-content'> 
    </div> 
</div> 
.... 

コントローラー：

use 'strict'; 

angular.module('myApp.landing', ['ngRoute']) 

.config(['$routeProvider', function($routeProvider) { 
}]) 
.controller('landingCtrl', ["$scope", "$http", "URL", function($scope, $http, URL) { 
    $scope.scrolled = false; 
    $scope.open_question = false; 
}]). 
directive("scroll", ["$window", function($window){ 
    return { 
     scope: false, 
     link: function($scope, element, attrs){ 
      angular.element($window).bind("scroll", function(){ 
       if (this.pageYOffset >= 1000) { 
        $scope.scrolled = true; 
        var body_el = angular.element(document.querySelector(".toggle-slide")); 
        angular.element(body_el).triggerHandler('click'); 
       } else { 
        $scope.scrolled = false; 
       } 
       $scope.$apply(); 
      }); 
     } 
    }; 
}]) 
.directive('slider', function() { 
    return { 
     restrict:'A', 
     compile: function (element) { 
      // wrap tag 
      var contents = element.html(); 
      element.html('<div class="slideable_content" style=" margin:0 !important; padding:0 !important" >' + contents + '</div>'); 

      return function postLink(scope, element, attrs) { 
       var i = 0; 
       // default properties 
       scope.$watch(attrs.slider, (n, o) => { 
        if (n !== o) { 
         i++; 
         var target = element[0], 
          content = target.querySelector('.slideable_content'); 
         if(n) { 
          content.style.border = '1px solid rgba(0,0,0,0)'; 
          var y = content.clientHeight, z = i; 
          content.style.border = 0; 
          target.style.height = y + 'px'; 
          setTimeout(() => { 
           if (z === i) { 
            target.style.height = 'auto'; 
           } 
          }, 500); 
         } else { 
          target.style.height = target.clientHeight + 'px'; 
          setTimeout(() => { 
           target.style.height = '0px'; 
          }); 
         } 
        } 
       }); 

       attrs.duration = (!attrs.duration) ? '0.5s' : attrs.duration; 
       attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing; 
       element.css({ 
        'overflow': 'hidden', 
        'height': '0px', 
        'transitionProperty': 'height', 
        'transitionDuration': attrs.duration, 
        'transitionTimingFunction': attrs.easing 
       }); 
      }; 
     } 
    }; 
}); 

私は（JSフィドルなど）のdivのクリックでスライドをトリガすることにより、最初にしようとしているとそれがありませんうまくいかない。プラス私はそれがページが特定のスクロールに達すると起こるようにしたいと思います（そのため、スクロール・ディレクティブも追加しました）。私は何が欠けていますか？コンソールにエラーは一切表示されません...

Answer 1

私はコンテンツがない場合、隠れたdivの高さは0なので、トリガーには何も表示されませんでした！

私が、それはうまく動作divの中にいくつかの<br>タグ場合：

<div slider="open_question" class='col-xs-12 three-questions slideable-content'> 
    <br> 
    <br> 
    <br> 
</div> 

残された唯一の問題は、私はまだそれが実際には別のdivをクリックせずに動作させることができないということです。

EDIT：OK私のせいで、スクロール命令でトリガされたクリックで動作しています。私は変数名をmyspellしました！ スクロール命令に追加する必要があるのはこれだけです：

$scope.open_question = true;