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?

I'll clarify: $scope itself is not visible. I was using that as an example. I'll edit to make more clear. — Gadzooks34
– Gadzooks34, Commented May 17, 2017 at 21:32
@Gadzooks34 Your line var x = $scope; looks kind of strange. What is your expected outcome of doSomething()? — Daniel
– Daniel, Commented May 17, 2017 at 21:37
I know, I know. It's a dummy line. The point is that $scope itself is not visible within doSomething(). My question is: why? — Gadzooks34
– Gadzooks34, Commented May 17, 2017 at 21:41

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2017-05-17 22:16:21Z

2

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>

edited May 17, 2017 at 22:16

answered May 17, 2017 at 22:04

Danny Fardy Jhonston Bermúdez

5,5915 gold badges27 silver badges38 bronze badges

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

1 Comment

Daniel Over a year ago

You're absolutely correct about those brackets [], but as Gadzooks just posted a snippet of his code, I'd assume that the module declaration happens in another file.

Daniel · Accepted Answer · 2017-05-17 22:05:16Z

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!";
        }
    }

})();

Gadzooks34 · Accepted Answer · 2017-05-18 13:50:07Z

0

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.

answered May 18, 2017 at 13:50

Gadzooks34

1,8363 gold badges22 silver badges29 bronze badges

Collectives™ on Stack Overflow

Scope variable not visible within ng-click handler

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related