What could be causing the directive to not trigger the controller method of mine?

Having trouble with my directive not calling the controller method. Here's the code I'm using:

Controller:

    exports.controller = ['$scope', function($scope) {
        $scope.addParamter = function () {
            console.log("here");
        };

       $scope.editParamter = function (item) {
            console.log(item);
       };
   }];

Page:

<formula-editor
    add-paramter="addParameter()"
    edit-paramter="editParameter(item)">
</formula-editor>

Directive:

Js:

exports.inject = function(app) {
    app.directive('formulaEditor', exports.directive);
    return exports.directive;
};

exports.directive = function () {
    return {
        restrict: 'E',
        templateUrl: '/dist/views/formula-editor.html',
        scope: {
            addParameter: '&',
            editParameter: '&'
        }
    };
};

formula-editor.html:

<button ng-click="addParameter()"></button>

Answer №1

Hey there, welcome to the world of Angular! Looks like you made a little mistake in your code. The $scope.addParamter() function name is misspelled in your HTML, causing your directive to not find the specified addParameter() function. To fix this issue, simply update your main HTML as shown below:

From

<formula-editor
    add-paramter="addParameter()"
    edit-paramter="editParameter(item)">
</formula-editor>

To

<formula-editor
    add-paramter="addParamter()"
    edit-paramter="editParamter(item)">
</formula-editor>

Take a look at this working demo of your directive.

Answer №2

If you're looking for a solution, give this code a try. It may just do the trick.

module.exports.directive = function () {
    return {
        restrict: 'E',
        templateUrl: '/dist/views/formula-editor.html',
        scope: {
            addParameter: '&addParamter',
            editParameter: '&editParamter'
        }
    };
};

Rather than using

<formula-editor
    add-paramter="addParameter()"
    edit-paramter="editParameter(item)">
</formula-editor>

you can opt for

<formula-editor
    addParamter="addParameter()"
    editParamter="editParameter(item)">
</formula-editor>

It's a more optimal approach.

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

V-Calendar is not displaying the accurate dates

https://i.stack.imgur.com/zk4h7.png The image displays dates starting on June 1, 2022, which should be a Wednesday but appears as a Sunday on the calendar. This issue affects all months as they start on a Sunday instead of their respective weekdays. The p ...

Transforming the text to a new line

I have been attempting to format lengthy texts from a JSON file, but I haven't been successful. The text keeps displaying as multiple sections within a single response, which can be seen in the image below. I've tested solutions like word-break a ...

Display HTML components as JSON data using AngularJS

Recently, I started exploring angular js and faced a challenge in formatting json data with the help of angular js. Below is a snippet of my json data: [ {"field_add_link": "<a href=\"/drupal3/drupal3/\">Home</a>"}, {"field ...

What is the best method for sending XML data to a URL using JavaScript within an Adobe AIR application?

I am currently developing an application that involves downloading an XML string from a URL and then posting it to another URL. I have managed to successfully download the XML string and can manipulate it using alerts, however, I am struggling with posting ...

How can I dynamically display or conceal columns in an AngularJS datatable based on certain conditions?

I am displaying a list of users using AngularJS datatable. I need to conditionally hide/show columns based on the user's role. For example, if the user is not an admin, then the last column should be hidden. If the user is an admin, then the last colu ...

Ways to refresh the main frame

Here is an example of parent code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Parent</title> </head> <body> <iframe src="https://dl.dropboxusercontent.com/u/4017788/Labs/child.html" width ...

Trigger an event right after the $scope is digested

I have a dilemma in my AngularJS application where I need to ensure that a $scope is fully processed into the DOM before running some code on it, such as a jQuery fadeIn animation. Is there a way to detect when the digest cycle is complete? Currently, my ...

Shuffle math calculations involving subtraction by a percentage using node.js or JavaScript

Hello there! If you want to subtract, say 35%, from a number, you can use methods like this: var valueInString = "2383"; var num = parseFloat(valueInString); var val = num - (num * .35); console.log(val); But have you ever wondered how you could randomiz ...

Tips for Angular4: ensuring ngOnDestroy completion before navigation

My task involves managing a list of objects where the user can choose an object to edit using a child component. However, when the user returns to the list component, the child component needs to clean up in the ngOnDestroy method, which includes making a ...

A guide on transforming a string into an array of objects using Node.js

Hey everyone, I have a single string that I need to convert into an array of objects in Node.js. let result = ""[{'path': '/home/media/fileyear.jpg', 'vectors': [0.1234, 0.457, 0.234]}, {'path': '/home/med ...

JavaScript overlay that does not interact with HTML elements directly

Currently, I am facing the challenge of implementing a javascript overlay upon page load without direct access to the html code. My only options are to upload .js and .css files. I have extensively searched for solutions, but as someone with limited exper ...

Leveraging the $dirty property in AngularJS to determine if any changes have been made to a form

Recently, I've been attempting to determine if my form is being edited by monitoring certain fields. I've come across $dirty as a potential solution for this task, but unfortunately, I'm struggling to identify what exactly I'm overlooki ...

Title Tooltip Capitalization in Vue.js: A Guide

Is there a way to change only the first letter of the title tooltip (from a span) to be capitalized? I attempted using CSS with text-transform: capitalize;, however, it didn't have the desired effect. <template lang="pug"> .cell-au ...

Show an image in a specific location on the webpage using JavaScript/jQuery

Is there a way for me to show a visual element at specific coordinates on the browser screen? For example, let's say I have calculated dynamic offsets of { left: 336, top: 378 }, and I would like to display a small line or image at that position. Is ...

Implementing dynamic checkbox values depending on a selection from a dropdown menu in Angular

In my checkbox list, I have various Samsung mobile models and two offers available. $scope.offers = [ { id: "as23456", Store: "samsung", Offer_message:"1500rs off", modalname: "Samsung Galaxy You ...

Convert CSV into an object with additional attribute

I'm attempting to import data from a CSV file into a d3 tree graph. While I've successfully loaded the JSON version of the data, the d3.csv parser isn't returning the expected string. Some approaches I've tried include: treeData.forEa ...

Executing a JavaScript function within a React web application

Having trouble calling JS functions from ReactJS? I recently encountered an issue when trying to import and call a JS function in a button onClick event in my React project. Specifically, when trying to use this.abtest.events.on in the handleButtonColor fu ...

Nested Ajax request fails and triggers a full page reload

My goal is to search for product information and images using a product code input on index.php. The query runs in open_first.php via an ajax post request, which works perfectly. open_first.php displays images that can be selected by clicking on them. How ...

Tips for integrating PHP into a Bootstrap modal dialog

After discovering and modifying a php script designed to process contact form content and display alerts on a Bootstrap 3 modal window, I encountered some issues. While I was able to successfully display errors and show the modal onload without any php con ...

Tips for passing an array between components in Angular 2

My goal is to create a to-do list with multiple components. Initially, I have 2 components and plan to add more later. I will be sharing an array of tasks using the Tache class. Navbar Component import { Component } from '@angular/core'; impor ...