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

Avoid the automatic scrolling of a datatable to the top when clicking on a button within a column using jQuery

Is there a method to stop the datatable from automatically scrolling to the top when any of the buttons is clicked? ...

Retrieving data with JQuery when encountering an XHR error

When I send a jQuery AJAX request and receive a successful response, I am able to retrieve my JSON data. However, if the response code is anything other than 200, I am unable to access the data in the jQuery callback function. This data is crucial as it co ...

Exploring the practical applications of Jade template along with AngularJS

I'm currently working on a website project with Node.js and Express. I need help making the divisions on the page dynamic. Is Jade the best tool for this, or is there another method I should use? Also, what exactly is AngularJS used for? I've tri ...

I'm trying to display hidden forms on a webpage when a button is clicked using the DojoToolkit, but I'm having trouble figuring out what's going wrong with my code

Currently, I am trying to grasp the concepts of Dojotoolkit and my objective is to display a form when a button is clicked. Upon reviewing other examples, my code seems correct to me; however, there appears to be something crucial that I am overlooking but ...

A Step-by-Step Guide to Transferring Information from SAML Response to Angular App in Web API and Loading the

After successfully adding SAML support to the backend of our WebAPI following OKTA authentication, a new challenge has emerged. We now face the dilemma of establishing a connection with our AngularJS app when the browser itself serves as the triggering po ...

Updating a value within destructuring and a loop: A step-by-step guide

My Goal: I aim to modify a value in an object that is part of an array element. Take a look at the code snippet below for a clearer understanding. An issue arises when I update the object's value through reference instead of creating a new copy, cau ...

React is still unable to display images when looping, despite the use of the "require"

I am facing an issue with extracting image paths from an array using the map function. The problem is that the image path is being printed as a string instead of rendering as an image. I tried using the require keyword, but I encountered an error stating " ...

Invoking PHP code from within Javascript will output the function as a direct string

I seem to be going in circles and missing something silly... My setup involves using CodeIgniter on the server-side and Bootstrap on the client, but that's not really the issue here... I am attempting to access a PHP value within a JavaScript functi ...

Combining outcomes from two separate jQuery AJAX requests and implementing deferred/promise functionality

I am struggling to combine the outcomes of two jQuery AJAX requests. Despite reviewing similar questions here, none seem to provide a solution. Each ajax call (2 in total) has a success function that calls the createStatusView function and passes it the ...

Tips for automatically populating a form in React with specified values

Here is the code I have written: .... const { userProfile, getUserProfile } = useContext(UserContext); useEffect(() => { getUserProfile(); //eslint-disable-next-line }, []); const [user, setUser] = useState({ ...

What method sits snugly between prepend() and append()?

Just a quick question I have. I am attempting to align an element with my target. Usually, we use prepend (before the target) and append (after the target). Is there something similar that allows us to position that element directly on top of what we are ...

How to retrieve the index of a nested ng-repeat within another ng-repeat loop

On my page, there is an array containing nested arrays that are being displayed using ng-repeat twice. <div ng-repeat="chapter in chapters"> <div ng-repeat="page in chapter.pages"> <p>Title: {{page.title}}</p> </d ...

Unleashing the potential of an endless animation by incorporating pauses between each iteration

I am trying to create an infinite animation using animate css but I want to add a delay between each iteration. After exploring various options, I first attempted to achieve this using plain JavaScript. Here is the HTML snippet: <div id="item" class= ...

Creating a custom toJSON function for a property declared using Object.defineProperty

Let's consider a scenario where we have an object with a specific property that is meant to reference another object, as shown below: Object.defineProperty(parent, 'child', { enumerable: true, get: function() { return this._actualCh ...

Exploring Objects using the for-in loop in ReactJS

This code is written in Reactjs. I am attempting to iterate through and print object data, but I keep encountering an error --> TypeError: Cannot read properties of undefined (reading 'state'). Could someone please help me identify what I am d ...

How can I efficiently fetch data from Firebase, manipulate it through computations, and present it using React Hooks?

I am currently working on retrieving multiple "game" objects from Firebase Storage, performing statistical calculations on them, and then presenting the game statistics in a table. Here is an overview of my code structure: function calculateTeamStatistics( ...

How can I include a JSON object in an angularjs $scope variable?

How can I effectively inject my JSON Object into my angular $scope during the create() function? Sample HTML: <input type="text" class="title" placeholder="hold" ng-model="formData.text"/> <input type="text" class="desc" placeholder="description ...

Extract attributes from a string of HTML containing name-value pairs

Here is a sample string that I need to work with '<img id="1" data-name="test" src="img_01.jpg" />' My goal is to extract the attribute name and value pairs from the string, create the element, and apply these attributes. I have come up ...

Binding a value from a template model to the parent scope in AngularJS using directives

I have been attempting to develop an angular directive that mimics the functionality of this jquery jsfiddle. http://jsfiddle.net/RCaCM/7/ The main goal of the directive is for the controller scope to contain a width value, which will be displayed in the ...

Error encountered upon initializing Node-RED due to the presence of an unexpected token while incorporating the NPM module "file-exists" into the

Currently, I'm in the process of developing an application using Node-RED and I'm looking to incorporate some NPM modules into my project. One particular module from James Thom caught my attention, called node-red-contrib-npm, which automates the ...