角滑塊指令不工作

的問題是，不能正常工作。下面的代碼：

查看：

 .... 
     <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 
       }); 
      }; 
     } 
    }; 
});

我通過一個div（如爵士小提琴），一次點擊觸發的幻燈片試圖先和它不行。另外我希望在頁面達到特定的滾動時發生（這也是爲什麼我添加了滾動指令）。我錯過了什麼？控制檯顯示沒有任何錯誤...

來源

2016-05-24 ste

好吧，事實證明，如果我沒有內容隱藏div的高度是0，所以觸發器沒有任何顯示！

如果我，但在div一些<br>標記它工作得很好：

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

唯一剩下的問題是，我仍然不能使它沒有實際點擊另一個DIV工作。

編輯：好吧，我的錯，它的工作與點擊觸發的滾動指令，我只是myspelled變量名！這是我必須在滾動指令中添加的所有內容：

$scope.open_question = true;

來源

2016-05-24 14:16:26 ste

角滑塊指令不工作

回答

相關問題