CODEWITHSUNDEEP
javascriptangularjs
Richard Hamilton
Richard Hamilton

Reputation: 26434

AngularJS - ng-mouseover doesn't fire my controller function

I am trying to call a function when my button is moused-over. This code should work, but it doesn't fire the function I defined in my controller.

JavaScript code

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

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>

I have a plunker

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

Any ideas? Thanks!

Upvotes: 1

Views: 1743

Answers (2)

Joe L.
Joe L.

Reputation: 4643

your-code.js

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

You need to load your 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>
  <script scr="your-code.js"></script>


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

Upvotes: 5

jdpipkin
jdpipkin

Reputation: 103

You're not loading app.js on the page.

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

Upvotes: 3

Related Questions