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

Error with JSON data from the Twitch TV API

I am having trouble with the Twitch API. When a streamer is live, I work with the "Stream" property, but if they are not streaming, I need to refer to another link. I use the getJSON function to fetch the necessary API link and work with it. However, my lo ...

Trigger function in a different child component on mouse up

Trying to call a function in a child component from another child component in ReactJS. Specifically, I want to trigger a function in another component when the 'mouseup' event happens. Here is an illustration of what I am attempting to achieve: ...

What is the process for implementing a security rule for sub-maps with unique identifiers in Firebase?

I am looking to implement a security rule ensuring that the quantity of a product cannot go below zero. Client-side request: FirebaseFirestore.instance .collection('$collectionPath') .doc('$uid') .update({'car ...

Labeling src library files with namespaces

I have developed a ReactJS website that interacts with a library called analyzejs which was created in another programming language. While I am able to call functions from this library, I do not have much flexibility to modify its contents. Up until now, ...

Using Angular's ng-repeat alongside a bootstrap input checkbox, make sure to incorporate a dynamic ng-model and utilize ng-

This particular issue is proving to be a bit challenging for me to articulate, but I'll give it my best shot. I'm currently working on implementing Angular checkboxes with their ng-true-value attribute in conjunction with a dynamic ng-model. < ...

Tips for retrieving the chosen value from an ajax.net ComboBox using javascript

Is there a way to extract the selected value from an ajax.net combobox using JavaScript for client-side validation? What would be the most effective method to achieve this? Thank you. This is how I managed to obtain the value: var combo = $get('ddl ...

Tips for displaying a div near the cursor's location when hovering in React JS

Looking for a way to show a hidden div at cursor position when hovering on Text item1 or item2. Check out the sample GIF animation in this Link My attempt using Jquery code inside React resulted in an error: $(".text-item").mouseenter(function ( ...

Navigating through the maze of ES6 imports and dealing with the complexities

Currently, I am delving into React and creating my own components. However, the issue of project organization has arisen. Here is the structure of my project: Project_Folder - Components - Form - index.js - form.less - package.js ...

Encountering a challenge with Nuxt where I am unable to navigate back when utilizing the require method

After successfully viewing the image, I encountered an error when trying to navigate back using <NuxtLink :to="{ path: 'About', hash: '#secondNav' }" class="close">, which resulted in a message stating Cannot f ...

Select elements from a PHP loop

As part of my school project, I am developing a basic webshop. Currently, I am using a while loop to display featured products on the homepage. However, I now need to implement a shopping cart functionality. After a user clicks the "add to cart" button, th ...

Issue encountered when attempting to develop a countdown timer using Typescript

I am currently working on a countdown timer using Typescript that includes setting an alarm. I have managed to receive input from the time attribute, converted it using .getTime(), subtracted the current .getTime(), and displayed the result in the consol ...

Why isn't my data appearing when using $http.get in AngularJS?

I'm encountering an issue where my bar graph doesn't display data when using $http.get. However, if I eliminate $http.get and directly call the URL, the data shows up perfectly. Any suggestions on what might be causing this problem? AngularJS v ...

Difficulty with Drag Events in Angular Bootstrap Calendar

I am encountering an issue with the drag event functionality of Angular Bootstrap Calendar. I am utilizing this link as a reference. Here is the HTML code snippet: <div ng-controller="scheduleCtrl as vm"> <div class="calender-mid"> <div ...

Unpacking jQuery's fancybox collection

Can anyone guide me to where I can locate the unpacked version of Jquery.fancybox-x.x.x.pack? I attempted to fix the code formatting manually in order to comprehend it better, but I'm still finding it challenging... ...

When an input is double-clicked, the message"[object object]" appears on the screen

Here is the structure of the template used for the directive. Our code fetches data from a service which contains all the details of a specific individual. We display only the first name, last name, and either designation or company affiliation from that d ...

Empty screen appears when "npm run serve" command is executed following the build process

I am currently utilizing Material-ui. Following the project build with npm run build, I encounter a blank page when running npm run serve. I attempted to set homepage: "./" in the package.json as suggested here, however, it still displays a blank ...

The feature for adding a function in Moment.js seems to be malfunctioning

Unfortunately, the moment().add() function is not functioning properly in my JavaScript code. var theDate = moment(event.start.format("YYYY-MM-DD HH:mm")); //start Date of event var checkquarter = theDate.add(30, 'minutes'); var plus = 30; if ...

Issue: A request is not pending for flushing during the testing of an AngularJs service

As a beginner in AngularJs, I am currently working on my first unit test. In order to test the service I created, I wrote a test that simply returns a single Json object. However, whenever I run the test, I encounter the error mentioned in the title. I am ...

Firebase 3 authentication does not maintain persistent login sessions

I recently upgraded my AngularJS app to use Firebase 3.x and AngularFire 2.x for email and password authentication. I referred to the following documentation for migration: https://firebase.google.com/support/guides/firebase-web https://github.com/fi ...

Dynamic shopping cart with Vue.js

Currently, I am working on a shopping cart project using Vue.js and Vuetify. I need help figuring out how to capture the boolean value true or false and adjust the total price in the amount based on whether it is true or false. Any suggestions? <v-con ...