Utilize a function as a parameter for a directive by calling it from within an

Question

Utilize a function as a parameter for a directive by calling it from within an

As I continue to enhance my application, I am working on giving a directive the ability to display additional buttons (for various actions) by passing an object to it.

Although I can successfully display the button, I am facing the challenge of executing a function when that button is clicked.

The object itself contains a mix of strings and functions, as shown below:

<tablegrid
  table="flavorings"
  additional-buttons="[{name: 'add', onclick: 'function(){ }', icon: 'fa fa-plus'}]"
  show-actionbutton="true"
  show-rating="true"
  show-search="true"
  show-rowcheckbox="true"
  show-header="true">
</tablegrid>

The template for my directive looks like this:

<button ng-repeat="aB in additionalButtons" class="btn btn-primary" ng-click="ab.onclick" type="button">
  <i ng-class="aB.icon" ng-show="aB.icon  != ''" aria-hidden="true"></i>&nbsp;
  <span>{{ 'TABLEGRID_'+aB.name | uppercase | translate }}</span>
</button>

I am seeking guidance on how to properly execute the onclick function. Can you help me with this?

javascript angularjs angularjs-ng-click

Answer 1

Answer №1

If you want to call a function from an object within your view, you can do so directly by using the following syntax:

ng-click="yourObject.functionName(parameters)"

Remember to include the parentheses in the function call, even if there are no parameters passed

Below is a demonstration showcasing how this method works:

var app = angular.module('myApp', []);

app.controller('MyCtrl', function($scope) {
    $scope.additionalButtons = [
        {'name': 'First', 
         'onclick': function() {alert('1')}
        }, 
        {'name': 'Second', 
         'onclick': function() {alert('2')}
        }
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
    <button ng-repeat="ab in additionalButtons" ng-click="ab.onclick()">Click {{ab.name}}</button>
</div>

Answer 2

If you want to call a function from an object within your view, you can do so directly by using the following syntax:

ng-click="yourObject.functionName(parameters)"

Remember to include the parentheses in the function call, even if there are no parameters passed

Below is a demonstration showcasing how this method works:

var app = angular.module('myApp', []);

app.controller('MyCtrl', function($scope) {
    $scope.additionalButtons = [
        {'name': 'First', 
         'onclick': function() {alert('1')}
        }, 
        {'name': 'Second', 
         'onclick': function() {alert('2')}
        }
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
    <button ng-repeat="ab in additionalButtons" ng-click="ab.onclick()">Click {{ab.name}}</button>
</div>

Utilize a function as a parameter for a directive by calling it from within an

Answer №1

Similar questions

How to access sibling elements within the link function of an AngularJS directive

Typescript's Nested Type Assignments

The Autocomplete feature in Material-UI is not rendering any output

Incorporate payment processing functionality into your IONIC app by connecting a

Return true in an incorrect manner

Turn off all pointer events on the overlaying div but keep scrolling enabled

Send the JSON file to the server by uploading it

Transferring information from AJAX to PHP script with the click of a button

Communication between child and parent components in Vue.js is an essential feature

Download the latest Backand Angular SDK from npm

Conceal a div once the user scrolls to a certain position using vanilla JavaScript

Reload Popup Box

How to retrieve the first option selected in Material-UI React?

Utilizing numerous controllers within a single page

Can passing undefined to React's setState method be considered incorrect?

React JS: Component failing to render

Challenges with the Express server console

Vue.js 2: Keep an eye on changes, but wait until after the initial data fetch

Before each loop, a return value is encountered

Null value added to MySQL database using Node.js