Utilizing a function as an argument within two directives in AngularJS

Question

Utilizing a function as an argument within two directives in AngularJS

My list comprises of Task items:

This is my template:

<div> 
    <p class="work-item-name">{{ task.Name }}</p>
    <p class="assigned-to">{{ task.Assignee }}</p>
    <button class="btn btn-primary btn-sm" ng-click="goBack()"><i class="fas fa-arrow-left"></i></button>
    <button class="btn btn-primary btn-sm" ng-click="moveForward()"><i class="fas fa-arrow-right"></i></button>
    <button class="btn btn-danger btn-sm" ng-click="removeTask()"><i class="fas fa-trash-alt"></i></button>
</div>

All these are nested within a taskList:

This is the taskList template:

<div id="{{ status }}" class="col-md-4 tasksContainer">
    <ul class="list-group">
    <li class="list-group-item flex-column">To Do</li>
    <li ng-repeat="task in tasks | filter:{Status: 0}" class="list-group-item list-group-item-danger">
            <task-card 
                    task-details="task"
                    go-back-task="goBack()"
                    move-forward-task="moveForward()"
                    remove-task="removeTask()">
            </task-card>
        </li>
    </ul>
</div>

I want to pass on the go back, move forward and delete task functions from the initial call:

<task-List 
    status="todo" 
    tasks="tasks"
    go-back-task="goBack($event, task)"
    move-forward-task="moveForward($event, task)"
    remove-task="removeTask($event, task)">
</task-List>

to each individual task (in order for each task's button to alter its properties). But in my existing code, on the final call when the button is pressed, both $event and task appear as undefined. What would be the correct approach to passing down functions as parameters in such scenarios?

javascript angularjs angularjs-directive angularjs-components

Answer 1

Answer №1

One possible explanation for the problem is that when the task-list is instantiated, the functions are being called immediately like this

back-Task="backTask($event, task)"

.

Instead of that approach, it would be better to pass references to the functions like so back-Task="backTask" and then call the functions within ng-clicks in the Task template like this

ng-click="backTask($event, task)"

Here is an example of the Task template:

<div> 
    <p class="assignment">{{ task.Assignment }}</p>
    <p class="assignment">{{ task.Assignee }}</p>
    <button class="btn btn-primary btn-sm" ng-click="backTask($event, task)"><i class="fas fa-arrow-left"></i></button>
    <button class="btn btn-primary btn-sm" ng-click="advanceTask($event, task)"><i class="fas fa-arrow-right"></i></button>
    <button class="btn btn-danger btn-sm" ng-click="deleteTask($event, task)"><i class="fas fa-trash-alt"></i></button>
</div>

And here is an example of the Task list template:

<div id="{{ status }}" class="col-md-4 taskList">>
    <ul class="list-group">
    <li class="list-group-item flex-column">To Do</li>
    <li ng-repeat="task in tasks | filter:{Status: 0}" class="list-group-item list-group-item-danger">
            <task 
                    task="task"
                    back-Task="backTask"
                    advance-Task="advanceTask"
                    delete-Task="deleteTask">
            </task>
        </li>
    </ul>
</div>

Lastly, the instantiation of the Task list should look something like this:

 <task-List 
    status="todo" 
    tasks="tasks"
    back-Task="backTask"
    advance-Task="advanceTask"
    delete-Task="deleteTask">
</task-List>

I hope this explanation helps and makes sense :)

P.S. If you're defining directives, remember to use camel case in the JavaScript declaration (e.g. taskList) and lower-case-dash-separated in the template (e.g. <task-list>).

Answer 2

One possible explanation for the problem is that when the task-list is instantiated, the functions are being called immediately like this

back-Task="backTask($event, task)"

.

Instead of that approach, it would be better to pass references to the functions like so back-Task="backTask" and then call the functions within ng-clicks in the Task template like this

ng-click="backTask($event, task)"

Here is an example of the Task template:

<div> 
    <p class="assignment">{{ task.Assignment }}</p>
    <p class="assignment">{{ task.Assignee }}</p>
    <button class="btn btn-primary btn-sm" ng-click="backTask($event, task)"><i class="fas fa-arrow-left"></i></button>
    <button class="btn btn-primary btn-sm" ng-click="advanceTask($event, task)"><i class="fas fa-arrow-right"></i></button>
    <button class="btn btn-danger btn-sm" ng-click="deleteTask($event, task)"><i class="fas fa-trash-alt"></i></button>
</div>

And here is an example of the Task list template:

<div id="{{ status }}" class="col-md-4 taskList">>
    <ul class="list-group">
    <li class="list-group-item flex-column">To Do</li>
    <li ng-repeat="task in tasks | filter:{Status: 0}" class="list-group-item list-group-item-danger">
            <task 
                    task="task"
                    back-Task="backTask"
                    advance-Task="advanceTask"
                    delete-Task="deleteTask">
            </task>
        </li>
    </ul>
</div>

Lastly, the instantiation of the Task list should look something like this:

 <task-List 
    status="todo" 
    tasks="tasks"
    back-Task="backTask"
    advance-Task="advanceTask"
    delete-Task="deleteTask">
</task-List>

I hope this explanation helps and makes sense :)

P.S. If you're defining directives, remember to use camel case in the JavaScript declaration (e.g. taskList) and lower-case-dash-separated in the template (e.g. <task-list>).

Answer 3

Answer №2

In order to implement the task component, utilize one-way binding using '<' for inputs and expression binding with '&' for outputs:

app.component("task", {
    bindings: { item: '<',
                backTask: '&',
                advanceTask: '&',
                deleteTask: '&'
              },
    controller: function() {
        this.backClick = (event) => this.backTask({$event: event});
        this.advanceClick = (event) => this.advanceTask({$event: event});
        this.deleteClick = (event) => this.deleteTask({$event: event});
    },
    template: 
        `<div> 
            <p class="assignment">{{ $ctrl.item.Assignment }}</p>
            <p class="assignment">{{ $ctrl.item.Assignee }}</p>
            <button ng-click="$ctrl.backClick($event)"><i class="fas fa-arrow-left"></i></button>
            <button ng-click="$ctrl.advanceClick($event)"><i class="fas fa-arrow-right"></i></button>
            <button ng-click="$ctrl.deleteClick($event)"><i class="fas fa-trash-alt"></i></button>
        </div>`
});

Similarly, for the taskList component:

app.component("taskList", {
    bindings: { status: '<',
                tasks: '<',
                backTask: '&',
                advanceTask: '&',
                deleteTask: '&',
              },
    controller: function() {
        this.backClick = (event, task) => backTask({$event:event, $task:task});
        this.advanceClick = (event, task) => advanceTask({$event:event, $task:task});
        this.deleteClick = (event, task) => advanceTask({$event:event, $task:task});
    },
    template:
        `<div id="{{ $ctrl.status }}" class="col-md-4 taskList">
            <ul class="list-group">
            <li class="list-group-item flex-column">To Do</li>
            <li ng-repeat="task in $ctrl.tasks | filter:{Status: 0}" class="list-group-item list-group-item-danger">
                <task 
                    item="task"
                    back-task="$ctrl.backClick($event, task)"
                    advance-task="$ctrl.advanceClick($event, task)"
                    delete-task="$ctrl.deleteClick($event, task)">
                </task>
            </li>
            </ul>
        </div>`
});

Example of usage:

<task-list 
    status="vm.todo" 
    tasks="vm.tasks"
    back-task="vm.backTask($event, $task)"
    advance-task="vm.advanceTask($event, $task)"
    delete-task="vm.deleteTask($event, $task)">
</task-list>

To explore further details, refer to the AngularJS Developer Guide - Component-based application architecture.

Answer 4

In order to implement the task component, utilize one-way binding using '<' for inputs and expression binding with '&' for outputs:

app.component("task", {
    bindings: { item: '<',
                backTask: '&',
                advanceTask: '&',
                deleteTask: '&'
              },
    controller: function() {
        this.backClick = (event) => this.backTask({$event: event});
        this.advanceClick = (event) => this.advanceTask({$event: event});
        this.deleteClick = (event) => this.deleteTask({$event: event});
    },
    template: 
        `<div> 
            <p class="assignment">{{ $ctrl.item.Assignment }}</p>
            <p class="assignment">{{ $ctrl.item.Assignee }}</p>
            <button ng-click="$ctrl.backClick($event)"><i class="fas fa-arrow-left"></i></button>
            <button ng-click="$ctrl.advanceClick($event)"><i class="fas fa-arrow-right"></i></button>
            <button ng-click="$ctrl.deleteClick($event)"><i class="fas fa-trash-alt"></i></button>
        </div>`
});

Similarly, for the taskList component:

app.component("taskList", {
    bindings: { status: '<',
                tasks: '<',
                backTask: '&',
                advanceTask: '&',
                deleteTask: '&',
              },
    controller: function() {
        this.backClick = (event, task) => backTask({$event:event, $task:task});
        this.advanceClick = (event, task) => advanceTask({$event:event, $task:task});
        this.deleteClick = (event, task) => advanceTask({$event:event, $task:task});
    },
    template:
        `<div id="{{ $ctrl.status }}" class="col-md-4 taskList">
            <ul class="list-group">
            <li class="list-group-item flex-column">To Do</li>
            <li ng-repeat="task in $ctrl.tasks | filter:{Status: 0}" class="list-group-item list-group-item-danger">
                <task 
                    item="task"
                    back-task="$ctrl.backClick($event, task)"
                    advance-task="$ctrl.advanceClick($event, task)"
                    delete-task="$ctrl.deleteClick($event, task)">
                </task>
            </li>
            </ul>
        </div>`
});

Example of usage:

<task-list 
    status="vm.todo" 
    tasks="vm.tasks"
    back-task="vm.backTask($event, $task)"
    advance-task="vm.advanceTask($event, $task)"
    delete-task="vm.deleteTask($event, $task)">
</task-list>

To explore further details, refer to the AngularJS Developer Guide - Component-based application architecture.

Utilizing a function as an argument within two directives in AngularJS

Answer №1

Answer №2

Similar questions

When the component mounts in React using firestore and Redux, the onClick event is triggered instantly

Exploring the power of React Hooks with the useState() function and an array filled

Create an array by copying elements from another array object

Activating a link click inside a table with jquery

Angular directive for automatically selecting a <select> value when there is only one option available in ngOptions

What is the best way to link the roll button to a specific video URL?

Error occurs when passing a service as a parameter to a controller in AngularJS

NuxtJs login feature is functional, but encounters an unauthorized 401 error

Stop Cross-Site Scripting Attacks by Sanitizing jQuery html()

Reinstall the packages listed in the bower.json file

JavaScript var is not defined

Guide on viewing chromedriver logs during Protractor testing

Ways to identify if a resize event was caused by the soft keyboard in a mobile browser

ng-controller does not function properly when assigned a variable as its parameter

iOS 8 home screen web apps with status bar overlay and footer bar integration

Performing the addition operation on two floating point numbers in JavaScript

Incorporating a dropdown menu into an HTML table through jQuery proves to be a

Struggling to decide on the perfect CSS selector for my puppeteer script

The event handler is not being triggered when selecting the tag

Executing all promises later in Node.js using Promise.all