在哪里实现ng-click功能,控制器或指令?

时间:2015-07-23 14:44:14

标签: javascript angularjs dom controller directive

我是AngularJS的初学者,我理解大部分技巧,但我仍然掌握着“文化”。

我希望在HTML,DOM,数据和通信之间保持清晰的分离。 我对控制器的印象是实现“数据”模型的模块,但没有UI语义(即DOM操作)。 但是在我的HTML中,如果我使用ng-click,那么为click函数实现访问控制器的范围,这可能需要回调到DOM中。

那么如果我不想在控制器中使用DOM操作,我应该在哪里实现我的点击功能? DIRECTIVES是对此的普遍回答吗?

假设我在一个页面上有2个需要相互交互的控件,我应该在那些实现两个子控件的单击函数的父控件上创建一个指令吗?或者可能为每个控件创建一个指令,并可能将另一个控件的ID作为属性传递?或者也许是父母和子女的指示?

---------更新1 -----------
以下HTML是一个简化的人为例子,希望能够说明我的问题。

.b .c

当用户输入txtSearchText时,将填充autoCompleteResults,将通常的最小字符和时间分解。 当用户按下或单击btnDoSearch时,将清除/隐藏autoCompleteResults并填充fullResults。 最后,如果用户开始输入新的txtSearchText,则会清除/隐藏fullResults,并再次看到autoCompleteResults的结果。

任何指导都将不胜感激!

2 个答案:

答案 0 :(得分:1)

  

那么如果我不想在控制器中使用DOM操作,我应该在哪里实现我的点击功能? DIRECTIVES是对此的普遍回答吗?

在我看来,

document.querySelector()意味着类似addClissng-click等等。directive是事件,应该处理某些业务逻辑。把它放在控制器中就可以了。

当然,指令是你的另一种选择。 modal通常用于跨不同页面提取一些可重用的组件,例如directives。如果您在不同的控制器中重复某些代码,请考虑将它们提取到servicelibrary(shiny) shinyUI(fluidPage( fileInput('datafile', 'Choose CSV file', accept=c('csv', 'comma-separated-values','.csv')), tableOutput('table'), plotOutput('plot') ))

  

假设我在页面上有2个需要相互交互的控件,......

简而言之:使用专为这种情况设计的good overview here

答案 1 :(得分:0)

一般的理念是尽可能少地引用DOM。您想要做的大多数(如果不是全部)事情可以通过将HTML元素的一个方面绑定到$ scope上的属性并操纵该属性来完成。所以你永远不必做一些像#34;将<span id="foo">的类更改为红色,因为isRed是真的&#34;。相反,你会<span ng-class="{ red: isRed }>&#34;。因此,如果您有两个共享信息的点击处理程序,那么让它们更改控制器中的一些公共变量并使用DOM绑定相应地具有UI状态是完全有效的。指令更多地用于重用DOM元素,或者当您必须明确引用DOM元素时,即调整div的滚动属性。例如,您可以使用指令将相同的单击处理程序添加到许多元素。服务可用于共享信息,但如果两个控件都属于同一范围,那么这样做的理由就不那么明了。