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

我首先尝试通过点击div（如js小提琴）触发幻灯片，但它不起作用。另外，我想在页面达到某个滚动时实现它（这也是我添加滚动指令的原因）。我错过了什么？控制台完全没有错误...

Answer 1

好的，事实证明，如果我没有内容，隐藏div的高度为0，那么触发器没有任何显示！

如果我在div中使用了一些<br>标记，则效果很好：

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

唯一的问题是，如果不实际点击另一个div，我仍然无法使其工作。

编辑：好吧，我的错，它正在处理由scroll指令触发的点击，我只是拼错了变量名！这是我必须在scroll指令中添加的所有内容：

 $scope.open_question = true;

Angular滑块指令不起作用

1 个答案: