Invoke a controller class method using es6 syntax from within a directive template

Is it possible to invoke a controller class method using ES6 syntax from a directive template in AngularJS?

For example, consider the following directive:

import angular from 'angular';

function dpGrid() {
    return {
        restrict: 'E',
        scope: {
            options: '='
        },
        template: require('./grid.directive.html')
    }
}

export default angular.module('directives.dpGrid', [])
    .directive('dpGrid', dpGrid)
    .name;

A snippet from the directive template:

<a class="btn btn-info" ng-click="delete(item)">delete</a>

I am looking to call the delete() method of a controller from the directive template. The controller is defined as follows:

export default class userController {

    constructor($scope) {
        this.$scope=$scope;    
    }

    delete(item){

        console.log("item : ",item);
    }


}
userController.$inject = ['$scope'];

The challenge is that I cannot use the controller attribute in the directive due to the need to work with multiple controllers.

Answer №1

In my opinion, it would be beneficial to invoke your directive within your controller for better integration. Directives can either be utilized in controllers or directly inserted into the DOM using attributes.

I fail to comprehend the rationale behind invoking a controller method within a directive. Directives are primarily designed for handling DOM manipulation tasks.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for invoking C++ from Javascript in Mozilla Rhino?

Currently, I am incorporating Mozilla Rhino in my application and I require the use of a C/C++ library. Are there any alternative methods available to access this library apart from directly calling on c/C++ functions through Java? ...

Update Text in B-table Cell using Boostrap Vue

I need to change the text color of each cell in a column within a b-table. I have successfully changed the text color of the column header, but what about the individual cell texts? Here is the current b-table code: <b-card title="Total"> ...

What is the best way to incorporate a N/A button into the dateRangeFilter located in the header of a webix dataTable, enabling the exclusion of N/A values within that specific column?

`webix.ready(function(){ grid = webix.ui({ container:"tracker", editaction:"click", editable:true, view:"datatable", css:"webix_header_border", leftSplit:1, ...

jquery hover event for video 'oncanplay'

My website features numerous videos that are intended to play on hover, but sometimes there is a delay in the playback. I would like to add a loader div to address this issue. How can I ensure that the loader is hidden once the video is ready to play? I h ...

What is the best method to verify a string against a set of approved characters using JavaScript?

I have written some code that sanitizes user input to allow only alphanumeric characters and hyphens. Here is the code snippet: https://jsfiddle.net/py4pnr0L/ const inputValue = 'GHJHlk;sxa787BVK'; const sanitizedValue = inputValue.toLowerCase( ...

Implement a transformation on the API endpoint's JSON data to prepare it for display in a React

I'm currently developing a React application and have created a component to display tabular data. The API endpoint I am calling returns data in the following format: { "bitcoin": { "usd": 48904, "usd_market_cap": 9252 ...

Run a JavaScript function on a webpage loaded through an AJAX response

I need to trigger a function through an AJAX request sent from the server. The function itself is not located on the calling page. Here's an example of what I am trying to achieve: 1. PHP script being called: <script> function execute() { ...

I am struggling to figure out how to make the responsive menu close

#switch image var up = 'https://image.flaticon.com/icons/svg/149/149187.svg'; var down = 'https://image.flaticon.com/icons/svg/128/128397.svg'; $('#resNavToggle').click(function() { if ($('.resNavIcon').attr( ...

Use the `fetch` method in JavaScript/TypeScript to make an API call to an IPFS URI but be prepared for potential issues like CORS restrictions, network errors, or

I am currently working on a Next.js project with TypeScript in the browser, and I need to execute the following fetch request: const tokenURIResponse = await fetch( "ipfs://bafybeig37ioir76s7mg5oobetncojcm3c3hxasyd4rvid4jqhy4gkaheg ...

Stop Angular from duplicating attributes by setting the replace parameter to true

The code snippet below demonstrates an Angular directive: var app = angular.module('demo', []); app.directive('myDirective', function() { return { restrict: 'E', template: '<h1>Foo bar</h1> ...

When the ajax response comes in, my javascript code seems to suddenly stop

After sending a POST request, my JavaScript suddenly stops working for some unknown reason. Here's the situation: I visit my webpage, fill out the form, and then click 'Click me' : Upon clicking OK in the alert popup, I see the expected ou ...

When a project sets useBuiltIns to 'usage', there is an issue with importing the library generated by Webpack

I am eager to create a versatile UI component library and bundle it with Webpack. However, I encountered an issue when trying to import it into another project that has useBuiltIns: 'usage' specified in the babelrc file. The import fails with the ...

Move two markers on Google Maps simultaneously

After researching various articles and posts on Stack Overflow about selecting multiple markers in Google Maps, I have been unable to find a solution for dragging two markers simultaneously. While I've managed to make it work so that one marker can tr ...

Modify the icons in the leaflet layer control

I'm looking to customize the icon for each Leaflet layers control on my website when there are multiple controls. The objective is to have unique icons for different layers. Here is an example of what I want to achieve: https://i.sstatic.net/Jxq6W.p ...

Adding double quotes to arrays in D3.js after using the .map method

Here is the code snippet I am working with: d3.csv("static/data/river.csv", function(data) { var latlongs = data.map(function(d) { return [d.Lat,d.Lng]; }) var lineArray1 = latlongs; console.log(lineArray1); When I view the outpu ...

arrange the elements in an array list alphabetically by name using the lodash library

Is there a way to alphabetically sort the names in an array list using JavaScript? I attempted to achieve this with the following code: const sample = [ { name: "AddMain", mesg: "test000" }, { name: "Ballside", ...

What is the best way to incorporate data from a foreach method into a function call within an HTML string?

Having trouble calling a function with data from a foreach loop while generating HTML cards and buttons from an array. The issue seems to be in the renderProducts() method. /// <reference path="coin.ts" /> /// <reference path="prod ...

What is the reason for $addToSet always returning 1 upon update?

Recently, I have been utilizing mongoose for my project. I encountered an issue when attempting to update my data in a specific way. model.update({_id: id}, {$addToSet: {refs: refId}}, function(err, numAffected){ console.log(numAffected); }) Although t ...

Display Image Automatically Upon Page Opening

Currently, I have an HTML file that includes the following code: <img src="(Image from file)" alt="Raised Image" class="img-raised rounded img-fluid"> I am attempting to retrieve the image from a file when the webpage loads using the server.js file ...

Inquiring about the rationale behind using `jquery.ui.all.css` specifically

I'm curious about the impact of jquery.ui.all.css on Tabs As soon as I remove it, <link rel="stylesheet" href="jquery/dev/themes/base/jquery.ui.all.css"> My tabs stop functioning. Here's my query: What exactly does the jquery.ui.all.cs ...