Angular function binding example (‘&’)

Tiety Kooistra
16-12-2016

In an angular directive you can use a function in the parent scope by using the ‘&’ function binding. Why would this be needed?

In this example a teacher is creating an online assignment to witch he wants to add some students from a bigger list. To add students a popup is opened to get and show all the students to choose from. This popup is an element that will be used at more places in the application and is therefor an angular component. This is where the function binding is coming in handy. The teachers assignment needs to know about the added students, but the students in the popup and the teachers assignment live in a different angular scope. The function binding allows you to call a function on the parents scope. So from the directive containing the students you can call a function on the controller of the teachers assignment. Lets get out the code to show how this is done.

Code example

Parent JavaScript

On the controller handling the create-assignment.html is the function onAddStudentsParentScope that needs the students from the popup. At this moment this function does not have access to students. To fix that we connect this function to the add-students component.

// createAssignmentController.js

    function onAddStudentsParentScope(students) {
        //Do stuff
    }

Parent HTML

On the parents HTML, where the teacher is creating the assignment there is a button to open the add students popup. For the popup itself you see the components add-students tag. The onAddStudentsParentScope function is bound to the on-add atribute in the component tag. This makes it accessible on the scope of the component

<!-- create-assignment.html -->

<body>
    <!-- button to show the add studends popup -->
    <div>
        <a ng-click="ctrl.onShowAddStudentsPopup()">
            <span>Add</span>
        </a>
    </div>

    <add-students
        is-visible="ctrl.showAddStudentsPopup" 
        on-add="ctrl.onAddStudentsParentScope(students)">
    </add-students>
    
</body>

Popup JavaScript

On the component definition you see the bindings. There the onAddStudentsParentScope function is bound to onAdd with the “&” function binding.

// addStudentsComponent.js

angular
    .module('app')
    .component('addStudentsComponent', { 
        templateUrl: './add-students.html', 
        controller: AddStudentsController, 
        bindings: { 
            onAdd: '&' 
        }
    });
    
function AddStudentsController() {
    
}

Popup HTML

So the idea is to call the onAddStudentsParentScope function from the popup. For the HTML that is quite straightforward. You can use the onAdd binding and call it as the parent function.

<!-- add-students.html -->

<a ng-click="$ctrl.onAdd($ctrl.students)">Add</a>

Call from Javascript

Calling it from HTML is nice and all, but what if you need to do some stuff before or after you send the students, like formatting the students array. It is also possible to call the parent function from JavaScript. Lets look at how that is done.

First thing is making a function on the controller of the addStudentsComponent. In that function you can call the parent scope function.

// addStudentsComponent.js

function AddStudentsController() {
    function onAddStudentsChildScope() {
        //array of students that is selected in the popup
        this.studentsToAdd = []
        // call the onAddStudentsParentScope function on the parent scope
        this.onAdd(this.studentsToAdd);
        // posibility to reset the state
    }
}

In the HTML you only have to change the on-click to the new function in the controller.

<!-- add-students.html -->

<a ng-click="$ctrl.onAddStudentsChildScope()">Add</a>

Good luck coding with Angular function bindings.

 

 

LEAVE A REPLY

you might also like