angular scope is undefined

Question

I have an angular controller that I'm setting up to use the "controller as" syntax:

angular.module('app', []).controller('ctrl1', ctrl1);

ctrl1.$inject = ['$http', '$compile'];

function ctrl1($http, $compile) {
    function someHttpGet() {
        //get data
        var compiled = $compile(data)($scope);
    }
}

the reason I'm even trying to bind the compiled data to a scope object is because I saw an answer that said to do that, but it doesnt make sense to me because in my view I'm using the controller as syntax.

how can I get this to work correctly?

Hmm...never seen an approach like this. Whats the reason doing it like that? In order to solve your issue you should try to add '$scope' to your $inject array. — Markus
– Markus, Commented Aug 5, 2015 at 4:01
@Markus but I thought the whole point of the controller as syntax was to avoid injecting a scope object? — Abdul Ahmad
– Abdul Ahmad, Commented Aug 5, 2015 at 4:02
Never seen that syntax. However I just had a look at the angular docs and they provide an example for that syntax (docs.angularjs.org/api/ng/directive/ngController). It appears to me, that they are using 'this' instead of $scope. — Markus
– Markus, Commented Aug 5, 2015 at 4:07

Bhojendra Rauniyar · Accepted Answer · 2015-08-05 04:00:43Z

1

You didn't inject the $scope in your controller:

ctrl1.$inject = ['$http', '$compile', '$scope'];//like others $scope needs to be injected
function ctrl1($http, $compile, $scope) {
 function someHttpGet() {
  //get data
  var compiled = $compile(data)($scope);
 }
}

As $scope isn't automatically injected in the controller.

answered Aug 5, 2015 at 4:00

Bhojendra Rauniyar

86k36 gold badges179 silver badges240 bronze badges

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

3 Comments

Abdul Ahmad Over a year ago

but I thought the whole point of the controller as syntax was to avoid injecting a scope?

Bhojendra Rauniyar Over a year ago

Just note that when you use $scope in your code you need to inject it first. That's it.

ryeballar Over a year ago

@AbdulAhmad the controller as syntax only provides an alias for your views to access with. If you observe carefully, you would notice that the alias name of the controller would be attached to the scope. e.g. MyController as Ctrl would be equivalent to $scope.Ctrl.

Markus · Accepted Answer · 2015-08-05 04:20:21Z

You propably would use something like this

angular.module('app', [])
.controller('myController', ['$http', Controller1]);

function Controller1($http) {

    // you can use 'this' here instead of using $scope
    this.name = "foobar";

    var that = this;
        // using $http then
    $http.get("/your/api").success(data) {
        that.data = data;
    });
}

// This is a $scope function then
Controller1.prototype.sayHello = function() {
    console.log("Hello World!");
}

However, personally I haven't used that approach yet, and I'm not sure if this does work at all. Consider this as pseudo code. That's just what I've gathered from reading the docs.

Anil kumar · Accepted Answer · 2015-08-05 04:30:21Z

0

angular.module('app', []).controller('Ctrl1' function($scope,$http', '$compile')
{
  $scope.someHttpGet = function(){
  //get data
  var compiled = $compile(data)($scope);
  }
});

answered Aug 5, 2015 at 4:30

Anil kumar

9287 silver badges18 bronze badges

Collectives™ on Stack Overflow

angular scope is undefined

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related