Angular JS directive managing multiple elements

As I understand it, whenever we want to do DOM manipulations in Angular JS for some reason (displaying data, controlling layout behavior, etc.), we should use directives. Now there are times when some DOM manipulations on one element require information about other DOM elements.

One example in the real world: suppose we want to resize a div so that it always matches all screens. So basically the div has one specific height, and we want to change this height according to the content, etc., To make the div fill the screen. Usually we should consider other elements of the DOM, such as headers, etc., when doing such manipulations.

Another example: suppose we have a login form, and at the bottom of the form we want the link to allow the user to register if he does not have an account. When the user clicks the button, he must turn the form from the login for registration (usually another form is encoded and hidden). This is great if we add a directive by reference for this, it needs to manipulate the div form, and if we put it in the div form, it needs to contact the link.

In these cases (and I really am common that these are just two possible situations), is there a general rule on how we should act?

I mean, we have some DOM element <A>, and we want to manipulate it somehow, but for this we need information about another set of DOM elements <A1>, ... ,, <An>so how do we deal with this with consistency?

I thought about using requireand exchanged a directory controller. But this is strange, repeating the example of resizing, we would <div maintain-height>be a maintain-heightdirective with logic for resizing this div. Then, in order to contact him, we will need to install all the other place that causes the resizing of some directive that requires this. This does not seem natural, and in other cases I thought that he felt the same way.

, ​​, , , , ..?

+4
3

un angular. , , , , , . ( ) . , .

- , jQuery/jQLite . $document.

, , . CSS DOM?

( ) , showLogin. . - ?

+1

DOM AngularJS. , DOM, , / .

- Twitter-Bootstrap, . Bootstrap - CSS-, JavaScript. CSS - , . , , , 4 : , , , . , , , , , , , , . , <div> s, , ..

, . , , , , , , , , . , , , , . , , DOM , , .

0

DOM , DOM , .

, :

  • DOM , "" ( ).
  • ( ). , , , angular, , DOM DOM. "", . , , ( ).
  • (post) , . , , ( ) , DOM . .

, , DOM? , DOM , . :

  • , , , DOM ( DOM).
  • A directive for children, which is nested somewhere within the main directive, which can be notified when the main directive has completed its final binding phase.

Unfortunately, this does not guarantee that $ watch handlers (or even the parent binding function) will change the DOM in unexpected ways. If you know which directives are in the game, you must be sure that this will work reliably.

0
source

Source: https://habr.com/ru/post/1542983/


All Articles