directive ng-click not responding

drawer-card.html (template)

<div class="drawer-card-wrapper">
<div class="drawer-card-icon" ngClick="dcCtrl.toggle()">
    <i class="icon--{{ icon }}"/>
</div>
<div class="{{'drawer-card ' + (classesToAdd || '' )}}">
    <ng-transclude></ng-transclude>
</div>

cardDrawer.ts (directive and controller)

declare var _:UnderscoreStatic;

class DrawerCardController {
static $inject = [];

toggle() {
    alert('toggled');
}
}

DrawerCardDirective.$inject = [];

export interface IDrawerCardScope {
icon: string
classesToAdd: string
}

export interface IDrawerCardAttributes extends ng.IAttributes {
icon: string
'classes-to-add': string
}

export function DrawerCardDirective():ng.IDirective {
return {
    restrict: 'A',
    templateUrl: 'drawer-card.html',
    controller: DrawerCardController,
    controllerAs: 'dcCtrl',
    scope: true,
    replace: true,
    transclude: true,
    link(scope:IDrawerCardScope, element:ng.IAugmentedJQuery, attrs:IDrawerCardAttributes, controller:DrawerCardController) {
        scope.icon = attrs.icon || 'pencil';
    }
};
}

html (this is how i want to use it.)

<div drawer-card>
        Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
        risus. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
        Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit.                      
</div>

Answer №1

experiment with using ng-click within the div, rather than ngClick, to call your function.

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

Java Entity Framework Indexing Tables

I am currently utilizing ASP.Net Core and have implemented EntityFramework to create a controller with views. Specifically, I am in the process of enhancing the Index view to make it dynamic with dropdown selections. I have successfully completed everythin ...

The fancybox's excess content is concealed

I've recently integrated fancybox 2 into my project and have encountered an issue when appending HTML content to the modal. I disabled scrolling, but now any overflowing content is being hidden. Could this be related to the max-height of the modal? Ho ...

Is there a way to ensure that the await subscribe block finishes before moving on to the next line of code?

My goal is to utilize the Google Maps API for retrieving coordinates based on an address. In my understanding, using await with the subscribe line should ensure that the code block completes before moving on to the subsequent lines. async getCoordinates ...

I'm new to learning JavaScript and I'm wondering how I can receive a single alert using only the if operator

Extracted from the book "Beginning JS 4th edition", this code snippet displays two alert messages when loaded in a browser due to two NaN entries in an array. To ensure that only one alert is shown every time, how can I achieve this using the if operator? ...

Display a custom AngularJS directive on content loaded through $http request

I'm facing a dilemma. I have created a directive app.directive('a', function() { return { restrict: 'E', link: function(scope, elem, attrs) { elem.on('click', function(e){ ...

The v-for loop seems to only update the last element instead of all of them, which is incorrect

How can I ensure that all 3 page links in the nav are displayed in 3 languages of user choice? Initially, the language change works fine on page load. However, after clicking on a language change link once, only the last link's language changes instea ...

Exploring the intricacies of defining Vue component props in TypeScript using Vue.extend()

Here is a simple example to illustrate my question When I directly define my props inside the component, everything works fine <script lang="ts"> import Vue, { PropType } from "vue"; export default Vue.extend({ props: { col ...

The collapsible list feature that includes the use of plus and minus signs is malfunctioning

Below is the script that I wrote to address this issue, but for some reason the + and - swapping is not functioning correctly. $('.showCheckbox').click(function(e) { var dynamicBox = $(this).attr('val'); var collapseSign = $(th ...

Is there a way to target a button within an anchor tag without relying on a specific id attribute?

On my webpage, I have buttons that are generated dynamically using PHP from a MySQL table. Each button is wrapped in an anchor tag and when clicked, it triggers a Javascript function to carry out multiple tasks. One of these tasks requires extracting the ...

What is the best way to play a video from a certain time point in a React application?

How can I make my component automatically play from a specific time like 00:07:12,600 instead of starting from the beginning? import style from './Hero.module.css'; import Image from 'next/image'; import ReactPlayer from 'react-pla ...

Updating a JSON property in JavaScript on the fly

I am looking to dynamically replace the content of "placeholder" with {"John": "Dough"} using a function call. This initial method seems to work fine: a = {foo:{bar:{baz:"placeholder"}}}; a.foo.bar.baz = {"John" : "Dough"}; console.log(JSON.stringify(a)) ...

capture the options selected by a user and assign them to a

My dilemma involves incorporating a boolean value named 'public' into a select element for user interaction. I have devised the following solution: <select class="prompter-public-textfield" ng-model=selectedItem.public ...

Create an HTML table row that includes a value along with its related sibling and parent values

I need to create an HTML table that compares segments in a JSON object. The format should display the segments along with their measures organized by domain group and vertical: ------------------------------------------------------------------------------ ...

Displaying elements of array in Pug template is a key task for

As a newcomer to the Jade/Pug template engine used in Express, I am faced with a challenge. I need to display the name property of each object within an associative array that is passed as a parameter to my pug template from an express route module. I hav ...

JQuery draggable and JavaScript functionality become disabled following an AJAX request

I have a click event declared as follows: $('body').on('click', 'input#searchVariables', function () { var datasetId = $('.TSDatasetID').val(); var term = $('#searchTextbox').val(); ...

Error encountered in MEAN stack due to Angular - Unhandled Error: $injector:modulerr

I am encountering an issue while working on a MEAN stack project. Everything seems to be going smoothly initially, but as soon as I add a few more lines of code in Angular, an error pops up. Despite following various online courses on MEAN stack developmen ...

Issues with retrieving a result object from a MySQL query in NodeJS

I've been working on creating a logging system in NodeJS with a MySQL database. To establish the connection, I use the following code: const con = mysql.createConnection({ host : 'localhost', user : 'dbuser', passwor ...

Exploring the capabilities of React testing-library for interacting with the DOM within a React application

I've been working on developing custom developer tools after finding inspiration from Kent C Dodds' insightful article here. One of the challenges I encountered was automatically populating values in a form that I created. My approach involved u ...

Troubleshooting issue with Bootstrap's responsive scrollspy functionality

I am experiencing an issue with the responsiveness of my page. When I reduce the width of the page to half, the scrollspy disappears unexpectedly. I am unsure about the root cause of this problem. If you run the code I have shared here, you can observe th ...

utilizing vueJS for global notifications

It may sound like a cliché question, but I still haven't grasped it. I have a primary component that is always loaded in the application. Let's refer to it as DefaultContainer.vue <template> <div class="app"> .... Notifi ...