Angularjs, how do I call a child element in a parent element as a function defined in a custom directive?

The recent time is ready to refactor the code using custom directive in Angularjs.

It is explained here that encapsulating custom controls into directive is not necessarily reusable, but rather makes the code structure clearer. It's like you're splitting a long method into separate, small ways, and you don't necessarily have to reuse them. Responsibility independence and so on one vote benefit, will make later maintenance easier.

In the process of refactoring, I encountered such a problem, first:

Figure One:

This is the interface I want to refactor, with the three filter and two buttons written in a single page due to the tight time. At the time, I had a hunch that if the state was written to a scope, there would be a near-unsustainable disaster later on. Although I have isolated them with ViewModel, the code structure still makes me very dissatisfied.

What are you talking about? I can't see what's complicated. OK, you wait, then let you see what's inside.

Figure II:

This is the shape of one of the drop-down boxes unfold. What the? You think this is normal? Don't you see how hideous it is? All right, you wait. Three.

Might

This is the complete body after the three elder brother unfolds. Now you should understand how necessary it is to encapsulate them into directive.

(This product is now a popular global docaveonline, the company that uses Microsoft SharePoint does not know.) What? You never heard of them? I forgot to say that only a big company can use it.

I reconstructed the idea is very simple, each drop-down box is written independently of a directive, and then the brother three embedded in the same directive, the outer layer of the directive contains filter and reset two button.

The original interaction logic here is that the elements in each drop-down box have their own initialization state. But no matter how you rattling before, click on the Reset button to restore the "factory settings" for each drop-down box.

Each drop-down box of the directive has an independent scope is affirmative, all self-sufficiency, unrelated to the outside world. In other words, the Reset method for each drop-down box is encapsulated in its own directive.

So the question is, how can I invoke the Reset method in its child elements after I click the reset button?

At first I tried to use the combination of require and link, I wanted to encapsulate the reset method into the controller of the drop-down box, and then write the directive name of the three dropdown boxes in the parent element into require. This allows me to take the fourth parameter of the parent element's link method, an array of the three child element controllers, which makes it easy to invoke the reset method of each controller. (The controller's role is to expose the API externally)

But it was written and I found it wrong, as if require could only find himself or look for the parent element, unable to initiate an action to find the child element by the parent element. (may be, but not found.) If you know please tell me in the message. ）

In the case of run out, asked my master, he told me the following method, in fact, it is not difficult to see whether you understand the custom directive, scope inside, ' = ' this symbol.

Knowing a little bit, this is the meaning of two-way binding. The solution came, the code is as follows:

HTML section:

<div ng-controller= "Myctrl" >    <div>        <inner-directive filter-model= "Filtermodel" ></ inner-directive>        <button ng-click= "Filtermodel.reset ()" >click</button>    </div></ Div>

JS section:

<script> angular.module (' app ', [])   . Controller (' Myctrl ', function ($scope) {       $scope. Filtermodel = {　　　　           name: ' Xiaomablog '           }; })       . directive (' innerdirective ', function () {       return {          restrict: ' E ',             scope:{             filtermodel: ' = '             },             Template: ' <div ng-bind= ' filtermodel.name ' ></div> ',             link:function (Scope,elem, Attrs) {             scope.filterModel.reset = function () {                console.log (' Reset ');};}}   ); </script>

In the scope attribute in Innerdirective, the Filtermodel is defined as the property of the bidirectional binding, which means that directive can rattling this property, and the external Myctrl can also rattling this property. In this way, each other can call each other rattling results.

I close the underground break point, debug to you see:

The first step:

The start-up process of angular is to initialize the external scope first, that is, to execute the method in Myctrl and assign an object to Filtermodel;

(Note that the value of Filtermodel at this moment is undefined)

Step Two:

(Before you add the Reset method, you have already seen the Name property you added earlier)

The directive link method is then executed, and the scope is tightly tied to the DOM.

Step Three:

At this point, click Button, you can already call the Reset method, and print the ' reset ' in the console

You can try to add breakpoints in the Myctrl and Innerdirective link methods to debug, to observe the order of execution, to deepen the impression.

Attention:

We know the way the hammer is, not staring at it, but picking it up.

--Martin Heidegger

Listen to Martin and knock.

Angularjs, how do I call a child element in a parent element as a function defined in a custom directive?