AngularJS - Issue with ng-mouseover not triggering controller function

Question

AngularJS - Issue with ng-mouseover not triggering controller function

I am struggling to get a function to trigger when my button is hovered over. Despite writing what I believe is the correct code, the function from my controller is not being called. Can anyone spot the issue?

Below is the JavaScript code:

angular.module("myApp", [])
       .controller('myCtrl', function($scope) {
          $scope.alertHi = function() {
            alert('hi');
          };
       });

And here is the HTML code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example72-production</title>

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

</head>
<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <button ng-mouseover="alertHi()">
      Alert Hi
    </button>
  </div>
</body>
</html>

If you'd like to see the code in action, feel free to check out this live plunker:

http://plnkr.co/edit/ZyQUi266hFsnvPhcTcpn?p=preview

Any insights on why the function isn't firing would be greatly appreciated. Thank you!

javascript angularjs

Answer 1

Answer №1

code.js

angular.module("myApp", [])
       .controller('myCtrl', function($scope) {
          $scope.displayMessage = function() {
            alert('Hello');
          };
       });

Your code must be included:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>Sample - sample-example72-product</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
  <script scr="code.js"></script>

</head>
<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <button ng-mouseover="displayMessage()">
      Display Message
    </button>
  </div>
</body>
</html>

Answer 2

code.js

angular.module("myApp", [])
       .controller('myCtrl', function($scope) {
          $scope.displayMessage = function() {
            alert('Hello');
          };
       });

Your code must be included:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>Sample - sample-example72-product</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
  <script scr="code.js"></script>

</head>
<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <button ng-mouseover="displayMessage()">
      Display Message
    </button>
  </div>
</body>
</html>

Answer 3

Answer №2

Make sure you include app.js in your page's code.

<script src="./app.js"></script>

Answer 4

Make sure you include app.js in your page's code.

<script src="./app.js"></script>

AngularJS - Issue with ng-mouseover not triggering controller function

Answer №1

Answer №2

Similar questions

Invoke a function from a neighboring component using React hooks

Issues have been identified with the performance of Ionic Material List when used in conjunction with ng

Using angular.js to create ng-options with personalized values

When developing a node.js project using VMWare's shared folder, how can you manage the node_modules folder?

Firebase ref.on('value') will repeatedly trigger, even if no changes have occurred

Enhancing the AngularJS Login feature for server authentication

Django issue: A Tuple or struct_time argument is necessary

Integrating LinkedIn's oauth2 into an Ionic/AngularJS frontend for a hybrid mobile app, while utilizing ExpressJS, PassportJS, and MongoDB on the backend

Implementing a change event upon setting a value to an input element using JavaScript

How can I transfer a MongoDB collection to an EJS file in the form of a sorted list?

Using Angularjs to dynamically generate and submit tables

Encountering issues with styled component's flex not functioning as expected in React

Steps to enable navigation to external pages from a ReactJS app

Why am I getting a $injector:modulerr error while using angular-strap?

Dragging items in the horizontal list of Knockout-Sortable causes them to be pushed vertically

Which is better for scrolling in Angular 2+: using HostListener or window.pageYOffset?

Input field in AngularJS not showing initial value from ng-model

Alexa Account Linking - Error: Account linking credentials are not valid

Striving to design an event planner with the datepicker feature in javascript

Revamping JavaScript Code for Better Performance