Having trouble with ng-click function, unable to figure out the issue

Hello, I've hit a roadblock while trying to troubleshoot an issue with my project. Oddly enough, ng-click has suddenly stopped functioning.

Here are my routes

$stateProvider
        .state('index', {
            url: '/',
            templateUrl: 'templates/dashboard.html'
        })
        .state('tables', {
            url: '/tables',
            templateUrl: 'templates/tables.html',
            controller: 'MasterCtrl'
        });

The controller function is as follows

    angular.module('module')
    .controller('MasterCtrl', ['$scope', '$cookieStore', MasterCtrl]);

    function MasterCtrl($scope, $cookieStore) {

    $scope.doSomething = function(){
        alert("HEYYYY");
    };
}

Also, here is the HTML button causing the trouble

 < button ng-click="doSomething()">clickMe!< /button>

I'm puzzled as to why it's not working anymore, especially since it was functional earlier this week.

Any input or suggestions would be greatly appreciated!

Thank you

javascriptangularjsangularjs-ng-click

Answer №1

The proper way to display a function is by using parentheses. Modify it in the following manner:

<button ng-click="executeAction()">Click Here!</button>

Answer №2

<div ng-controller=“MasterCtrl”>
   <button ng-click=“doSomething()”>click me</div>
</div>

Give the code snippet a shot in your HTML document.

Answer №3

It seems like you might have overlooked something...

(function () {

  'use strict'
  
  angular.module('app', [])
    .controller('MasterCtrl', ['$scope', MasterCtrl])
  
  function MasterCtrl ($scope) {
      $scope.doSomething = function() {
        alert('clicked!')
      }
    }

})()
<html ng-app='app'>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-controller="MasterCtrl">
   <button ng-click="doSomething()">click me</div>
</div>

</html>

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

The sequence of execution in the code is not as anticipated

JS <script type="application/javascript"> var app = angular.module("app", []); app.controller("AppCtrl", function ($scope, $http) { $scope.data = []; $http.get("{{ url_for('data') }}") ...

angularjs

Sinon threw an assertion error out of the blue

Just diving into using Sinon and facing a small hiccup. Let's say we have a module (named myModule.js) defined as follows: //myModule.js var _f2 = function() { console.log('_f2 enter'); return {prop1:'var1'}; }; var f1 = ...

javascriptnode.jsunit-testingsinon

Is the function added using Restangular's extendModel method not working properly?

I am facing an issue with a service and controller setup. Here is my service code: .factory('Car', function(Restangular) { var baseCars = Restangular.all('cars'); Restangular.extendModel('cars', function(obj) { ...

angularjsrestangular

Strange behavior observed when making REST calls using Ionic / Angular from an array to localStorage

I need assistance with my Ionic app development to make it more dynamic. Currently, I am making several REST calls and storing their results in local storage. I have defined the URI and name for localStorage in an array. The problem is that when the $ht ...

angularjsionic-framework

It is not possible to assign the value "true" to a scoped variable if it is bound to a datepicker-popup

I am facing an issue with my boolean variables within the scope foo and bar. Both are initially set to false. For each variable, I have created buttons to toggle their values between true and false. However, if the variable is connected to the property is ...

angularjsdatepickerangular-ui-bootstrap

Tips for iterating through an array of images and displaying them in a React component

I am working on a project in my react app where I have 5 images that I want to cycle through indefinitely. The goal is to create an animation where a light bar appears to be constantly moving. https://i.sstatic.net/8tdfV.png The shifting dot in each imag ...

javascriptreactjsimageloops

Combining JavaScript JSON objects with corresponding parameters

I'm struggling to find a solution for merging two JSON objects. Despite searching for answers, I haven't found any that have been helpful. My goal is to compare two objects and if there's a match, add an attribute as a marker to the first ob ...

javascriptarraysjsonobjectnativescript

Transferring files and information using the Fetch API

I am currently working on a React application and I have defined the state of my application as shown below: const [book, setBook] = useState({ title: '', cover: {} numberPages: 0, resume: '', date: date, }); The & ...

javascriptjsonreactjs

When using Node-React, it consistently responds with a status code of 500 instead of

I'm facing issues with error handling on my server. While testing on localhost, everything runs smoothly and custom errors are returned correctly to the client. However, after deploying to a host like Heroku or Render, valid requests work as expected ...

javascriptnode.jsreactjsexpressaxios

Embrace the flexibility of using Next.js with or without Express.js

Recently, I started the process of migrating a project from create-react-app to next.js. However, I am facing uncertainty when it comes to migrating the backend of the project. Currently, my backend is built with an express server. In next.js, there are p ...

javascriptexpressnext.jsserverless

The SEMrush API is not displaying an 'Access-Control-Allow-Origin' header on the requested resource

When attempting to utilize the SEMrush API, I made a request using jQuery as shown below: $(document).ready(function() { $.get( 'https://api.semrush.com', { type: 'phrase_this', key: ' ...

javascriptjqueryajaxapicors

I am new to javascript and jquery. I have encountered numerous cases involving audio players

Recently delved into learning javascript and jquery. I managed to create a basic audio player that plays short audio clips. However, I've encountered an issue where clicking the play button on one clip displays stop buttons on all clips instead of on ...

javascriptjquery

Looking to display state-based dynamic data in a collapsible table with rows and columns using Material UI in React.js?

I came across the Material UI Collapsible Table component that I found quite intriguing, you can check it out here: https://material-ui.com/components/tables/#table My goal is to display dynamic data in both the table header and rows, with the ability to ...

javascriptreactjsmaterial-uicollapsable

Sending SQL information to an Angular interface using NodeJS

I'm struggling to figure out how to display data from a MySQL server using Node. Although I can successfully retrieve the data and log it in the CLI when running "node server.js", I am unsure of how to send this data to my Angular view. Console loggin ...

angularjsnode.js

Incorporate dynamic body color changes across all pages using AngularJS

On the home page, I want to change the color scheme so that it is consistent across all pages. The user should be able to choose a color from a list on the home page and have it apply to every page. Currently, the color selection only applies to the home p ...

htmlcssangularjs

When you hover over the page, the content shifts to reveal a hidden div

Trying to figure out how to show additional content when a photo is hovered over without shifting the rest of the page's content placement? Looking for alternative solutions rather than using margin-top: -22%. Here's a link to the website in que ...

javascriptjqueryhtmlcss

How can I determine when a WebSocket connection is closed after a user exits the browser?

Incorporating HTML5 websocket and nodejs in my project has allowed me to develop a basic chat function. Thus far, everything is functioning as expected. However, I am faced with the challenge of determining how to identify if connected users have lost th ...

javascriptnode.jswebsocket

JavaScript encoding the text

Looking for a straightforward JavaScript function to encrypt text data from a textarea using a key (the key being the user's password stored as a hashed session variable, outputted by PHP into a field). The objective is to have the content of the tex ...

javascripthtmlsecurityencryption

Encountering the error message "Undefined variable '$'" in a script that is loaded after jQuery

My code is simple - it loads jQuery first, followed by a script that uses the $ syntax. However, I keep encountering the error: ReferenceError: $ is not defined Initially, I suspected that the async attribute on the script tag was the issue, but changi ...

javascriptjqueryhtml

What could be causing the unexpected behavior in my NgMessages form validation?

I have developed a code that incorporates Angular JS form validation methods. There are two separate forms within the codebase, The initial form utilizes basic form validation while the second form employs ng-messages, However, an issue has arisen wher ...

javascriptangularjs