Scope variable not visible within ng-click handler

Question

I'm pretty new to Angular and am trying to figure out what's wrong here. There is a controller defined like this:

(function(){
    function myController($scope, CommsFactory) {

        $scope.doSomething = function() {
            var x = $scope;  // <- Doesn't work because $scope is not defined
        }
    }

    angular
        .module('aModule')
        .controller('myController', myController);
})();

The doSomething() method is then called by a button click like:

<input type="button" ng-click="doSomething()" class="btn--link" value="do it"/>

This seems straightforward to me but the problem is that, when I break within the method, $scope is not defined. This is different from most of the examples I've seen, and I can't figure out why. Shouldn't it be visible here? Obviously a lot of code is missing - I've tried to show only the relevant bits - could I be missing something somewhere else?

Answer 1

You're declaring a module then you need to add [] .

Something like this:

angular.module('aModule', [])
        .controller('myController', myController);

Usage

angular.module(name, [requires], [configFn]);

Arguments

• name.- The name of the module to create or retrieve.

• requires (optional).- If specified then new module is being created. If unspecified then the module is being retrieved for further configuration.

• configFn (optional).- Optional configuration function for the module. Same as Module#config().

Please, I would to recommend to read this guide about Angular Module: angular.module

 (function() { function myController($scope) { $scope.doSomething = function() { var x = $scope; console.log(x); } } angular .module('aModule', []) .controller('myController', myController); })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div data-ng-app="aModule"> <div data-ng-controller="myController"> <input type="button" ng-click="doSomething()" class="btn--link" value="do it" /> </div> </div> 

Answer 2

Your code is generally working fine as demonstrated in this fiddle .

Your main problem seems to be in the usage of $scope . $scope is an object containing all variables and methods which should be available in the corresponding template. For this reason, you would always reference a member of $scope, instead of the whole object. Furthermore, John Papas AngularJS style guide recommends the usage of controllerAs in favor of $scope for multiple reasons as stated in Y030

By convention, you should also give your controllers uppercase names and use explicit Dependency Injection

A typical use case would rather look like:

(function(){

    angular
        .module('aModule', [])
        .controller('myController', MyController);

    MyController.$inject = ['$scope', 'CommsFactory'];

    function MyController($scope, CommsFactory) {
        var vm = this;
        vm.doSomething = doSomething;

        function doSomething() {
            var $scope.x = "Did it!";
        }
    }

})();

Answer 3

SOLVED: It turns out that what I was experiencing had something to do with the way in which the Chrome debugger works. It appears to do some kind of lazy loading of variables defined outside of the function in which you break (or at least this as far as I've characterized it). What this means, at least in my case, is that if I break inside of the method, and $scope isn't actually used within that method (which, unfortunately, I was doing a lot because I was trying to verify that $scope was visible), then the debugger will report that $scope is unavailable.