2016-08-01 67 views
0

我有一个下拉菜单元素指令本质上显示带有附加功能的样式下拉列表。在Angular中向父控制器附加附加功能

我的下拉控制器有一个名为openDropdownItems的函数,该函数在显示列表时执行。

然后我也有另一个属性指令称为setInViewWhen提供当条件为真时的元件应该被滚动到视图中的表达式。

<x set-in-view-when="something.item === selectedItem"> 

这只是应用了我的属性指令一些X元素的例子。

事情是,我希望我的下拉列表项(即LIs)在它们上有这条指令,所以当用户使用键盘浏览它们时,它会在它们传递可见视口时自动在视图中滚动它们。这些项目是否显示在可滚动容器中,或者作为整体显示在比浏览器视口更长的列表中并不真正相关。

主要想法是滚动按照下拉列表选择。是否应该滚动主窗口。

问题

我可以让我的setInViewWhen指令完全独立的,但是这意味着我将不得不寻找最接近的滚动容器每当一个项目病情变化。这似乎是相当多的处理,我想避免重复(我需要遍历DOM向上,检查每个节点的计算的样式表属性OverflowY +一些额外的检查。

这基本上似乎是多余的,因为每当我得到最近滚动的祖先相同的指令,所有兄弟元素可以重用的计算结果。

问题1

我如何共享兄弟指令之间这方面的知识?如果我是触发一个事件我不知道是否接收器是兄弟姐妹或没有任何额外的处理。

问题2

相反,当我的指令的条件为真我理论上可以改变下拉父母的openDropdownItems先完成它的原始执行的,然后还执行滚动性检查,并与一起使用它的结果,每一次检查滚动容器我的指令的条件。 我可以通过指令requires属性访问我的指令中的下拉控制器,并在链接后阶段进行调整。

但是这也意味着我不能在我的下拉菜单之外使用我的指令,因为它是一个通用指令,我可以在我的应用程序的几个元素上添加一些元素,以便在某些条件下将元素滚动到视图中。

你会建议如何做到这一点?

+1

一些想法/意见:(1)对于Q1,存在用于同级的指示与彼此通信的直接方式。我通常创建一个封装父指令来中继消息。 (2)我*猜*条件'something.item === selectedItem'引入一个手表;对于选择项目列表,这可能是许多手表并且对性能不利。我宁愿在LI的父母中有一个手表,并在那里添加“滚动到视图”逻辑。 –

+1

(3)在2点在心中,你仍然可以有一个独立的'setInViewWhen'指令(似乎很有用)*和*有你'X'选替代指令份额与它的代码的控制器。例如。创建具有共同功能的服务,创建包含JS“类”的角度值,并具有两个'setInViewWhen'和'的控制器X'指令从它(或其他溶液)延伸。 –

+1

(4)相对到Q2:当孩子可能要求他们的父母,并在改变它的方法(这种技术甚至被角认可,看到NG-模型和定制控件),会有很多孩子进行更改,这可能导致一团糟...... –

回答

0

综上所述评论:

  • 问题1,有一个兄弟指令相互沟通的直接方式。我通常创建一个封装父指令来中继消息。
  • 按照意见,病情something.item === selectedItem引入了手表;对于选择项目列表,这可能是许多手表并且对性能不利。即使它现在不发生,它也是一个陷阱,并且有人可能会被诱使将其用于未来的一长串项目。我宁愿在<li>的父级中有一个手表,并在那里添加“滚动到视图”逻辑。
  • 考虑到以前的观点,您仍然可以有一个独立的setInViewWhen指令(看起来很有用),并让您的控制器X-选择替换指令共享代码。例如:
    • 包含公共功能的服务,
    • 含有碱类(打字稿或JS)的角度值,并具有两个setInViewWhenX指令的控制器从它延伸
    • 或任何其他溶液这是方便你的情况
  • 问题2相关新闻:孩子们都要求他们的父母,并改变它的方法(这种技术甚至被角认可,见ng-model和自定义控件他们重写ngModel.$render()通过替换它)。但是,如果你这样做,会有很多孩子改变父母的方法,这可能会导致一团糟。