angularjscontrolleras

AngularJS - ControllerAs ng-click not working


I'm struggling with getting no response from an ng-click on a project I'm working on. To isolate the problem, I've created a simple plunkr:

https://plnkr.co/edit/N4tDDcP5wmeKC5keSHAj?p=preview

There are no error messages on page load, no error message on click, and no alert() box displayed on click. Nothing happens at all.

<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-click-production</title>


  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script>
    var app = angular.module('app', []);
    app.controller('testController', function() {

      var vm = this;
      vm.test = test;

      function test() {
        alert("test");
      }

    });



  </script>


</head>

<body>
  <div ng-controller="testController as vm">
    <button ng-click="vm.test()">
      Test with controllerAs
    </button>
  </div>

</body>

Can anyone help please?

Many thanks


Solution

  • You've missed ng-app on body, see below:

    <body ng-app="app" ng-controller="testController as vm">
      <button ng-click="vm.test()">
        Test
      </button>
      <span>
    </span>
    </body>
    

    See updated plunker here:

    https://plnkr.co/edit/kBPOEpTvZBnNZJ1PchL2?p=info