将目标元素滑出 In/Slide 的指令

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 或 class 来告诉指令 hide/show 哪个元素？

更新：

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

更新了link指令（还需要注入$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

将目标元素滑出 In/Slide 的指令

Directive to Slide In/Slide Out Targeted Elements

javascript

jquery

angularjs

angularjs-scope

angular-directive