Question

我正在尝试在md菜单中使用md-tabs或md-nav-tabs。是的，我知道这不是一个好的做法，但它完全符合我所需要的，只要它在点击标签时保持打开状态。

所以我在这里找到了一些答案。 https://github.com/angular/material/issues/4334但$ timeout无法正常工作。是否有解决方案让这个工作？有替代方案吗？我真的很喜欢水平按钮下滑动线的动画，这是其他动画的奖励积分。

所以这是代码。

    'from http://www.mcgimpsey.com/excel/textfiles.html
Public Sub FixedFieldTextFile()
    Const DELIMITER As String = "" 'Normally none
    Const PAD As String = " "   'or other character
    Dim vFieldArray As Variant
    Dim myRecord As Range
    Dim nFileNum As Long
    Dim i As Long
    Dim sOut As String
    'MsgBox (ActiveSheet.Name)
    'vFieldArray contains field lengths, in characters, from field 1 to N
    vFieldArray = Array(30, 10, 10, 25, 25, 14, 14, 14, 14, 10, 10, 10, 10)
    nFileNum = FreeFile
    Open "Test.txt" For Output As #nFileNum
    'Open (ThisWorkbook.FullName & ".txt") For Output As #nFileNum
    'Open (ActiveSheet.Name & ".txt") For Output As #nFileNum
    'Open (Worksheet.Name & ".txt") For Output As #nFileNum
    For Each myRecord In Range("A1:A" & _
            Range("A" & Rows.Count).End(xlUp).Row)
        With myRecord
            For i = 0 To UBound(vFieldArray)
                sOut = sOut & DELIMITER & Left(.Offset(0, i).Text & _
                        String(vFieldArray(i), PAD), vFieldArray(i))
            Next i
            Print #nFileNum, Mid(sOut, Len(DELIMITER) + 1)
            sOut = Empty
        End With
    Next myRecord
    Close #nFileNum
End Sub

我做了一些调整以寻找合适的指令。它是原作者，@ clshortfuse github说它“你需要拦截md-menu-content上的click事件。如果事件传播，你可以处理。你可以立即调用stopPropagation并自己处理点击事件。”

  $scope.openMenu = function($mdOpenMenu, $event) {
  var menu = $mdOpenMenu($event);
  $timeout(function() {
    var menuContent = document.getElementById('durationcontent');

    function hasAnyAttribute(target, attrs) {
      if (!target) return false;
      for (var i = 0, attr; attr = attrs[i]; ++i) {
        var altForms = [attr, "data-" + attr, "x-" + attr];
        for (var j = 0, rawAttr; rawAttr = altForms[j]; ++j) {
          if (target.hasAttribute(rawAttr)) {
            return true;
          }
        }
      }
      return false;
    };

    function getClosest(el, tagName, onlyParent) {
      if (el instanceof angular.element) el = el[0];
      tagName = tagName.toUpperCase();
      if (onlyParent) el = el.parentNode;
      if (!el) return null;
      do {
        if (el.nodeName === tagName) {
          return el;
        }
      } while (el = el.parentNode);
      return null;
    };
    menuContent.parentElement.addEventListener('click', function(e) {
      console.log('clicked');
      var target = e.target;
      do {
        if (target === menuContent) return;
        if (hasAnyAttribute(target, ["ng-click", "ng-href", "ui-sref", "md-nav-click"]) || target.nodeName == "MD-TAB" || target.nodeName == "BUTTON" || target.nodeName == "LI") {
          var closestMenu = getClosest(target, "MD-MENU");
          if (!target.hasAttribute("disabled") && (!closestMenu || closestMenu == opts.parent[0])) {
            if (target.hasAttribute("md-menu-disable-close")) {
              event.stopPropagation();
              angular.element(target).triggerHandler('click');
            }
            return; //let it propagate
          }
          break;
        }
      } while (target = target.parentNode);
    }, true);
  });
};

}]);

并在模板中

          <md-menu ng-repeat="shoe in shoes">
        <button ng-click="$mdOpenMenu()">
          {{shoe.type}}
        </button>
        <md-menu-content>
          <div ng-include="shoe.template"></div>
          <p>the size is {{shoe.size}}</p>
        </md-menu-content>
      </md-menu>

我想要水平滑动条菜单的ux比什么都重要。我愿意接受其他建议，一切都会有所帮助。

然而，当然，这里是吸虫：http://plnkr.co/edit/JhDhwkhO9RwLcuzDKU0v?p=preview

Md菜单事件中的Md-Tabs或Md-Nav-Tabs保持传播

0 个答案: