CODEWITHSUNDEEP
javascriptangularjsyeomansingle-page-application
fuzzybear
fuzzybear

Reputation: 2405

Angular yeoman spa click function not activating

Hopefully an easy one, App just built with the yo angular generator.
HTML(index)

<li ng-click="menuClick()"  class="active"><a href="#/">Home</a></li>
<li><a ng-href="#/about" ng-click="menuClick()" >About</a></li>
<li><a ng-href="#/">Contact</a></li>

app.js (config )

   angular
.module('testAngualrApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
 ])
 .config(function ($routeProvider) {
  $routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl',
    controllerAs: 'main'
  })
  .when('/about', {
    templateUrl: 'views/about.html',
    controller: 'AboutCtrl',
    controllerAs: 'about'
  })
  .otherwise({
    redirectTo: '/'
  });
  });

JS (main)

angular.module('testAngualrApp')
  .controller('MainCtrl', function ($scope) {
   this.awesomeThings = [
    'HTML5 Boilerplate',
     'AngularJS',
     'Karma'
    ];
    $scope.menuClick = function () {
       alert("yo");
   };
 });

EDIT $scope was not exported, no longer getting $scope undefined.

The above click event does not fire, I've tried ng-click before ng-href, just in case the page was getting redirected first, I've also tried using $scope instead of this, Why does the function not fire ?

Update: No erros, does not alert!

Upvotes: 0

Views: 113

Answers (1)

charlietfl
charlietfl

Reputation: 171690

Since you are using this to declare methods in controller then it is assumed you are using controllerAs either in ng-controller or in router to define the alias for controller.

You must now use this alias object in the view to reference your controller methods and variables

Without knowing what your alias name is I will assume it is vm which is now being added to ng-click expression:

<li><a ng-href="#/products" ng-click="vm.menuClick()">Products</a></li>

Upvotes: 0

Related Questions