Where to implement ng-click functions, controller or directive?

Question

I'm a beginner in AngularJS, I understand most of the mechanics but I'm still grasping the "culture".

I'd like have clean separation between my HTML, DOM, data and communications. My impression of a controller is a module that implements a "data" model, but is void of UI semantics (i.e. DOM manipulation). However in my HTML, if I use an ng-click it is the controller's scope that is accessed for the click function implementation, which more then likely will need to call back into the DOM.

So where should I implement my click functions if I do not want DOM manipulation in my controller? Are DIRECTIVES the universal answer to this?

Suppose I have 2 controls on a page that need to interact with each other, should I create a directive on the parent of those controls parent that implements the click functions of both child controls? Or perhaps create a directive for each control and possibly pass the ID of the other control as an attribute? OR maybe a directive for the parent AND children?

--------- UPDATE 1 -----------
The following HTML is a simplified and contrived example that [hopefully] illustrates my question.

<div id="searchComponent">
    <input id="txtSearchText" ng-keyup="..."/>
    <input name="Go" id="btnDoSearch" ng-click="..."></input>
    <div id="autoCompleteResults"></div>
    <div id="fullResults"></div>
</div>

As the user types in the txtSearchText, the autoCompleteResults is populated, factoring in the usual minimum characters and timouts. When the user presses or clicks the btnDoSearch, the autoCompleteResults is cleared/hidden and the fullResults is populated. Finally, if the user begins typing new txtSearchText, the fullResults would be cleared/hidden and the autoCompleteResults is again seen with results.

Any guidance would be appreciated!

Added a little code to help illustrate. The question is where to implement the keyup/click events, because they will be manipulating the result div's directly. — JohnKoz
– JohnKoz, Commented Jul 23, 2015 at 16:51

Joy · Accepted Answer · 2015-07-23 14:52:50Z

1

So where should I implement my click functions if I do not want DOM manipulation in my controller? Are DIRECTIVES the universal answer to this?

DOM manipulations, in my opinion, means something like document.querySelector(), addCliss, etc. ng-click is the event, which is supposed to deal with some business logic. Put it in the controller is fine.

Of course, directive is your another choice. directive is usually used to extract some reuseable components, such as modal, across different pages. If you repeat some code in different controllers, consider extracting them to directives or service.

Suppose I have 2 controls on a page that need to interact with each other,...

In short: use service, which is designed for that scenarios.

answered Jul 23, 2015 at 14:52

Joy

9,60011 gold badges50 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JohnKoz Over a year ago

Thanks Shaojiang, I agree with the business logic intent of the controllers, which is why I'm trying to remove UI semantics. "DOM manipulations" might be more about reloading jqGrid's, or showing/hiding a div, or maybe selecting a row, etc. more events than actual injection of HTML elements in the DOM.

Nik Klassen · Accepted Answer · 2015-07-23 14:58:46Z

0

The general philosophy is to reference the DOM explicitly as little as possible. Most (if not all) things you want to do can be done by binding an aspect of you HTML element to a property on $scope, and manipulating that property. So you never have to do some like "Change the class of <span id="foo"> to red now that isRed is true". Instead you would have <span ng-class="{ red: isRed }>". So if you have two click handlers that share information, it's perfectly valid to have them change some common variable in your controller, and have state of the UI accordingly with DOM bindings. Directives are used more for reusing DOM elements, or when you do have to explicitly refer to DOM elements, i.e. adjusting the scroll properties of a div. You could use a directive to add the same click handler to many elements for example. Services can be used to share information, although if both of the controls belong to the same scope there's less of a reason to do that.

answered Jul 23, 2015 at 14:58

Nik Klassen

7318 silver badges16 bronze badges

2 Comments

JohnKoz Over a year ago

Thanks Nik, I also agree about using scope properties, but I think care should be taken that UI 'flags' are created (like "showSearchResults"). My biggest issue is calling jqGrid's GridUnload() function.

Nik Klassen Over a year ago

I don't know anything about jqGrid, but here's something I would try starting with jsfiddle.net/j3zaxvhz

Collectives™ on Stack Overflow

Where to implement ng-click functions, controller or directive?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related