javascript - 滑入/滑出目标元素的指令

Question

我复制了一个指令(并且正在工作)，以便在单击时滑入滑出隐藏区域，类似于 jQuery 隐藏和显示。

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

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

看看我的骗子: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>

我也尝试过 {{ending+$index }}

Answer 1

您可以使用要切换的元素的 ID。这将为您提供更大的灵 active :

指令变更:

.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 服务来确保在加载所有元素后发生绑定(bind):

更新了链接指令(还需要注入(inject)$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}}"。与目标相同，您必须使用 {{}}。顺便说一句，由于您在 li 上使用了 slide-toggle 两次，因此必须稍微更改您的 HTML，这是多余的。

Updated Plunker