Directive's ng-click function fails to execute

This directive contains a function that should be executed when clicked.

    ebApp.directive('monthDir', function () {
    return {
        restrict: 'E',
        templateUrl: 'htmlFiles/monthDirective.html',
        transclude: true,
        scope: {
            ebObj: "=obj"
        },
        link: function link(scope, element, attrs, ngModelCtrl) {
            scope.removeDir = function (removeVal) {
                console.log("asd"); //this is not displaying in the console

            }
            console.log(scope);
        },
        controller: function ($scope) {

        }
    }
})

The ng-click event in the following directive is not functioning properly. Below is the directive's HTML:

    <div class="row monthDirC">
    <span class="glyphicon glyphicon-remove-sign pull-right cursorC" 
  ng-click="removeDir(ebObj.costArray[count])" ></span>

    <div class="form-group">
        <label for="datepick" class="col-md-6">Select month</label>
        <md-datepicker id="datepick" class="col-md-6" ng-model="ebObj.costArray[count].myDate"
                       md-placeholder="Enter date"
                       md-min-date="minDate"
                       md-max-date="maxDate">

        </md-datepicker>
    </div>

This is how you use the directive in your HTML:

<div class="col-md-12">
        <month-dir ng-transclude ng-repeat="count in ebObj.costArray[0].countArray" obj="ebObj.costArray[count+1]"></month-dir>
</div>

Answer №1

Everything seems to be functioning correctly without any errors. If you encounter any issues, consider the following suggestions:

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

ebApp.controller('MainCtrl', function($scope) {
  $scope.ebObj = 'someVal';
});

ebApp.directive('monthDir', function() {
    return {
        restrict: 'E',
        template: '<div ng-click="removeDir()"><b>Click Me</b><ng-transclude></ng-transclude></div>',
        transclude: true,
        scope: {
            ebObj: '=obj'
        },
        link: function link(scope, element, attrs, ngModelCtrl) {
            scope.removeDir = function (removeVal) {
                console.log('asd'); // This message should appear in the console
            }
        },
        controller: function ($scope) {

        }
    }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="ebApp" ng-controller="MainCtrl">
  <month-dir ebObj="ebObj"><i>Click Me!</i></month-dir>
</div>

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 best way to import JSON functionality into Javascript specifically for use with Internet Explorer

I am facing an issue with loading JSON feature in JavaScript for IE8 while in compatibility mode. After receiving advice, I decided to utilize douglascrockford/JSON-js to enable JSON support on outdated browsers. To tackle this problem, I created a new f ...

Pass a data variable to an HTML file using express's sendfile function (quick inquiry)

Currently utilizing Node.JS, path, and express for running an HTML webpage. I need to pass a variable to the HTML file for its utilization: var client_cred_access_token = 'fakeToken'; ... app.get('/', function (req, res) { res.se ...

Having difficulty transferring information with Angular9

I retrieved an array of data from the back-end, and it should be structured as shown below: User Interface I want to bind the above data to a table using the code snippet provided below. HomeComponent.html <table class="table table-hover" i ...

How is it possible that the SetTimeout code continues to run even after calling clearTimeout

I have this code snippet within my react component: //some code var timeout = null; //global variable //some more code useEffect(() => { if(...some condition) { console.log('test1'); timeout = setTimeout(() => { ...

`How can I trigger a JavaScript event when the content of an input field is modified?`

Currently, I am working on implementing validation in JavaScript. My goal is to provide the user with an alert whenever they modify the value of an input field. <input type="text" name="onchange" id="onchange" size="35" maxlength="50" /> ...

What is the best way to pass the "$user" variable in a loadable file using ajax?

Is there a way to send the variable user to the mLoad.php file before executing this script? Any suggestions would be greatly appreciated. Thank you! $(document).ready(function(){ $("#message_area").load('mLoad.php'); $("#userArea").submit(func ...

"Trying to activate a hover effect on a div using JQuery, but it's not functioning

Is there a way to make these divs animate each time I hover over them? Currently, the animation only works once and does not repeat when hovering again. Can anyone provide guidance on how to achieve this? function Rotate() { $('#gear1,#gear2,#gea ...

How can I modify the appearance of the bootstrap scrollbar with scrollspy?

I'm struggling to modify the color of the scrollbar in Bootstrap scrollspy despite having a functional scrollbar. Here is an example of my code: HTML: <body> <div class="container, scrollbar" id="myScrollspy"> <div class=" ...

Updating a React event as it changes with each onChange event

Let's address a disclaimer before diving into the issue - for a quick look, visit this pen and type something there. The Scenario This is the JSX code snippet used in my render method: <input value={this.state.value} onChange={this.handleCh ...

Encountering the error "ReferenceError: __extends is not defined" is a common issue when modifying the rollup.config.js commonjs function in projects that use the ReactJS library

Currently, I am involved in a project and there is also a library project containing all the common components used throughout. Within this library, I had to integrate a component that relies on materialUI. However, upon trying to export this component, I ...

Calling a C# Webmethod using jQuery AJAX is not working as expected

I'm currently facing an issue calling a web method that I created. The problem lies in the fact that the ajax call isn't reaching my web method, which is puzzling to me because I have another web method in the same file with the same return type ...

Explore an array of objects to find and retrieve a value from the final matching object in JavaScript

I'm having difficulty retrieving the value for the last event that includes "SearchResults" in the scenario outlined below: Here is a schema of my datalayer where I am looking to gather information. Currently, I have managed to write the following co ...

What is the best way to implement a composite primary key in DocumentClient.batchWrite()?

I am attempting to conduct a batch delete process based on the instructions provided in this documentation. The example given is as follows: var params = { RequestItems: { /* required */ '<TableName>': [ { DeleteRequest: ...

transferring scoped model information to the controller

When using AngularJS, my view is structured like this: <div class="sli1" ng-init="values=[10,20,30,40,50]" <div class="sli2" ng-init="values2=[10,20,30,40,50]" I am attempting to send the initial data models back to the controller for retrieva ...

Anomaly in the default checked state of checkboxes

I'm currently working on a project and encountering an issue with the code below. I need to incorporate a forEach() loop within getElements() instead of using map(). Additionally, I want the default state of a checkbox to remain checked even after nav ...

Submitting forms with Ajax without reloading the page can cause errors in Internet Explorer

Simply put: Upon clicking the login button in Firefox, Chrome, or Safari, the form is submitted correctly, running a validation via ajax and opening a new page. However, in Internet Explorer (version less than 9), the submission attempts to post to the c ...

Is it possible to use JavaScript to toggle mute and unmute functions on an iPad?

Seeking assistance with managing audio on an iPad using JavaScript (mute/unmute). Any suggestions or advice would be greatly appreciated. ...

Trigger an alert when a button is clicked and redirect the user to an newly opened tab

I recently created a button with a link that opens in a new tab. I also implemented some JavaScript to display an alert. Everything is working as expected, but after the user clicks "OK" on the alert, they remain on the same page. I would like to automati ...

Learn the technique of storing a sequence of functions within a variable using jQuery

For instance, I am looking to assign a sequential process to multiple variables and utilize them in various scenarios. var disable_btn = true; var button_me = $('#contents.getsamplekit .sample-form .form #submit-btn-freeSample-me'); var button_d ...

The jQuery panel slider magically appears when you click the button, but refuses to disappear

One issue I am facing on my webpage involves a button that triggers a right panel to open using the jquery and modernizr frameworks. The button is positioned at the far right of the screen. When clicked, it slides to the left along with the panel it reveal ...