ng-click doesn't invoke method inside angularJs controller

Question

I am trying to create an angular application from scratch. I have been trying to solve this for hours now, but I couldn't make it work. All the following files are placed inside a parent folder.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Hello</title>
  <script data-require="[email protected]" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <h1>Student App</h1>
  <section ng-controller="HelloController">
    <h4>Enter Student Details</h4>
    <label for="name">Name :</label>
    <input id="name" type="text" ng-model="student.name" />
    <p>Hello {{student.name}}!</p>
  </section>
  <button id="name" type="submit" ng-click="onButtonClick()">Click</button>

</body>

</html>

HelloController.js

  angular.module('app', [])
    .controller('HelloController', ["$scope", function($scope) {

    $scope.onButtonClick = function()
    {
        console.log("method invoked");
    };

}]);

It would be nice if someone could help me solve this problem I am facing.

What happens if you open the dev console and set breakpoints on onButtonClick ? — Dortimer
– Dortimer, Commented Mar 16, 2019 at 22:39

JB Nizet · Accepted Answer · 2019-03-16 22:49:09Z

2

Your button is out of the <section> controlled by the controller. So clicking on it calls onButtonClick() on the root scope, not on te controller's scope.

answered Mar 16, 2019 at 22:49

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ng-click doesn't invoke method inside angularJs controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related