Question

我已经复制了一个指令（并且正在工作）以在幻灯片中滑动隐藏区域，类似于jQuery hide and show。

然而，这只适用于元素在一起时的情况，例如：：

<div slider-toggle>Click to show.hide</div>
<div slider>
    Stuff to show and hide
</div>

然而，如果元素彼此不相邻，例如

<ul>
    <li>
      <p>My list header</p>
      <span slider-toggle>Show</span>

    </li>
    <li slider>
      <p>Are to hide and show</p>
    </li>

  </ul>

这不起作用，并且在控制台中发生错误。

指令：

angular.module('app', [])
.directive('sliderToggle', function() {
    return {
        restrict: 'AE',
        link: function(scope, element, attrs) {
            var target = element.next()[0];
            attrs.expanded = false;
            element.bind('click', function() {
                var content = target.querySelector('.slideable_content');
                if(!attrs.expanded) {
                    content.style.border = '1px solid rgba(0,0,0,0)';
                    var y = content.clientHeight;
                    content.style.border = 0;
                    target.style.height = y + 'px';
                } else {
                    target.style.height = '0px';
                }
                attrs.expanded = !attrs.expanded;
            });
        }
    }
})
.directive('slider', function () {
    return {
        restrict:'A',
        compile: function (element, attr) {
            // 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) {
                // default properties
                attrs.duration = (!attrs.duration) ? '1s' : 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
                });
            };
        }
    };
});

请参阅我的plunker：http://plnkr.co/edit/Qwwhhf2jGlOT1TgvN2TE?p=preview

我怎样才能得到像UL LI这样的例子？当我调用slider-toggle时，是否有任何方法可以传入ID或类来告诉指令隐藏/显示哪个元素？

更新：

<ul> 
    <li ng-repeat-start="pending in MyData track by $index" slider-toggle  target="pending+$index">
      <p>My list header</p>
          <span slider-toggle>Show</span>    
    </li>
    <li <li ng-repeat-end="" slider id="pending+$index">
      <p>Are to hide and show</p>
    </li>    
</ul>

我也试过{{pending + $ index}}

Answer 1

您可以为要切换的元素使用ID。这会给你更大的灵活性：

指令变更：

.directive('sliderToggle', function($document) { //inject $document, can use document as well but I prefer to stick to the angular services
....
scope: { 
    target: "@"
},
link: function(scope, element, attrs) {
     var target = angular.element($document[0].querySelector("#" + scope.target))[0];
     ....

HTML用法：

<ul>
    <li>
       <p>My list header</p>
       <span slider-toggle  target="test2">Show</span>

    </li>
    <li slider id="test2">
       <p>Are to hide and show</p>
    </li>

</ul>

Plunker

修改：更改了指令以适应您的更新。这有点棘手，因为您正在动态编译ID，并且当指令初始化时，id尚未设置，因此它不知道该DOM元素。我所做的是使用$timeout服务来确保在加载所有元素后发生绑定：

更新了链接指令（还需要注入$timeout服务）：

link: function(scope, element, attrs) {


            var timeoutFunc = function () {
              var target = angular.element($document[0].querySelector("#" + scope.target))[0];

              attrs.expanded = false;  
              element.bind('click', function() {

                  var content = target.querySelector('.slideable_content');
                  if(!attrs.expanded) {
                      content.style.border = '1px solid rgba(0,0,0,0)';
                      var y = content.clientHeight;
                      content.style.border = 0;
                      target.style.height = y + 'px';
                  } else {
                      target.style.height = '0px';
                  }
                  attrs.expanded = !attrs.expanded;
              });
            }

            $timeout(timeoutFunc, 0);
        }

HTML也需要更新，使用如下：id="{{pending+$index}}"。对于目标，您必须使用{{}}。顺便说一句，因为您使用了slide-toggle两次并且在li上，所以必须更改HTML，这是多余的。

Updated Plunker

滑动/滑出目标元素的指令

1 个答案: