controller function not called from ng-click

Question

I have a controller that ive added a function to but cant get the function to be called from ng-click on an anchor. Ive looked at similar posts but cant really see what I could be missing. Its as though the controller function cant be seen?

The module and controller:

var commonModule = angular.module('common', ['ngRoute', 'ng.ckeditor']);
var mainModule = angular.module('main', ['common']);
//mainModule.config(function ($routeProvider, $locationProvider) { 
//    $locationProvider.html5Mode(true);
//});

commonModule.factory('viewModelHelper', function ($http, $q, $window, $location) {
    return MyApp.viewModelHelper($http, $q, $window, $location);
});
commonModule.factory('validator', function () {
    return valJs.validator();
});


    mainModule.controller("rootViewModel",
        function ($scope, $http, $q, $routeParams, $window, $location, viewModelHelper, $rootElement) {

            //test
            console.log("creating controller");

            var self = this;

          viewModelHelper.apiGet('api/PageContent/1', null,
          function (result) {
              $scope.htmlEditor = result.data;
          });

          $scope.ToggleEditor2 = function () {

              //test
              console.log("hello");

                if ($scope.editorVisible == true) {
                    $scope.editorVisible = false;
                }
                else {
                    $scope.editorVisible = true;
                }
            }
        });

The controller is referenced at the root level of the page:
Which in this case since im using ASP.Net MVC, is in my _layout.cshtml

<body data-ng-app="main" data-ng-controller="rootViewModel">

In a (mvc) view that gets loaded, I have a button with ng-click that calls the ToggleEditor2 function, but its never called. Cant get a breakpoint to hit in the chrome dev console and I dont see anything written to the log either.

<input type="button" ng-click="ToggleEditor2()" value="test me" />

Update:
If I wrap that anchor with a div and specify the "rootviewModel" controller there, the log message gets written. Hmmm - something tells me its related to scope?

<div data-ng-controller="rootViewModel">
    <input type="button" ng-click="ToggleEditor2()" value="test me" />
</div>

Are you sure that your app/module is called just "main" and not "mainModule", as the variable name is declared in your javascript? "mainModule.controller(...)". I have done that before — mhodges
– mhodges, Commented Mar 8, 2016 at 21:15
yes, I updated the post above to include the definitions im using — bitshift
– bitshift, Commented Mar 8, 2016 at 21:19
Probably - using $scope is not the best way to pass data back and forth between the controller and view anymore. Using the controllerAs syntax is the solution to that. Here is a great resource on the new syntax: toddmotto.com/digging-into-angulars-controller-as-syntax — mhodges
– mhodges, Commented Mar 8, 2016 at 21:30
Thank you 100X, that link helped a bunch. I fixed it using namespacing and other hints as suggested in that link. Im using Angular 1.5 but some of that code was pulled in from some 1.2x source. — bitshift
– bitshift, Commented Mar 8, 2016 at 21:45
No problem, I can put together an answer for you to mark as correct for others' benefit. — mhodges
– mhodges, Commented Mar 8, 2016 at 23:20

mhodges · Accepted Answer · 2016-03-08 23:27:30Z

1

Problem

A common problem with $scope is that when using any sort of nested controllers or modules, your $scope's can step on each other and cause issues like you have experienced.

Solution

Using Angular's "Controller As" syntax is the recommended solution for this problem. It allows you to create multiple instances of the same controller, while defining and maintaining a unique scope for each instance.

This Article is a great resource I used to understand and implement this new syntax.

answered Mar 8, 2016 at 23:27

mhodges

11.2k2 gold badges32 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

controller function not called from ng-click

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