Question

我在jquery中制作了这个流畅的菜单：http://jsfiddle.net/krongbongtjong/5LeJh/ 很容易，但我想以Angular的方式做到这一点，但我不知道如何攻击它。

如果我做了指令

   <div stackables class="stackables">

该指令如何知道要测量和修改的“可堆叠”元素？

如果我改为在子级别上执行指令

   <div stackable class="stackable">

它是如何知道它的兄弟可堆叠的？而且，如何避免订阅超过1个滚动事件？

非常一般的初学者问题。我希望stackoverflow不会太模糊。

Answer 1

通常，在创建指令时，您可以访问指令所附加的DOM元素。它是链接函数的第二个参数，它看起来像这样：

link: function (scope, elem, attrs)  //elem is the dom element

现在你知道你可以做任何你想做的事情，把指令放在父节点或子节点上。但在我看来，将指令放在父节点上将是这种做法的“角度方式”。回答你的问题：

该指令如何知道要测量的“可堆叠”元素和修改

您需要熟悉transclude concept（在文档中查找转码）。基本上在使用transclude时，DOM元素的内部子元素将被转发到指令。示例：

// Template
<stackables>
  <li class="stackable">Item 1</li>
  <li class="stackable">Item 2</li>
  ...

// Directive
directive('stackables', function() {
return {
  restrict: 'E',
  transclude: true, <- Here it is
  scope: {},
  template: '<ul class="stackables" ng-transclude></ul>', <- do not miss the ng-transclude here
  link: function (scope, elem) {
    //1. elem is the ul dom node
    //2. You can add an event listener from here
    //3. You can find the li dom with something like
    //elem.find('li');
    ...

最后，您应该能够像往常一样将滚动事件监听器附加到指令的elem，并在find函数的帮助下计算子元素的大小。

（初学者）如何处理滚动Angular方式

1 个答案: