Can't access to injected AngularJS services within a function in a controller

Question

Can't access to injected AngularJS services within a function in a controller

Cannot access to $scope and Food inside destroy function.

foodProject.controller('FoodsCtrl', function($scope, Food) {

    $scope.foods = Food.index();
    $scope.destroy = function(food){
        debugger;
        console.log(Food, $scope);
        food.$destroy();
    };
});

The local scope variables are only

food: Resource

this: $get.e.$new.a

I can't find $scope and Food

http://jsfiddle.net/fW2EA/1/ http://jsfiddle.net/wizztjh/fW2EA/3/

javascript
javascript-framework
angularjs

Answer 1

Include this line in your destroy function (it is missing from your fiddle):

console.log(Food, $scope);

Then in your debugger, check the Closure section of Scope Variables (I was using Chrome), when stopped on your break point. Food and $scope are in there (as one would expect!).

this in the context of the destroy function is a new scope within the ng-repeat so is not the same as $scope, although both are scopes.

Answer 2

Within your function, this is the scope, e.g. this.foods.

I believe if you want Food to be accessible add it to the scope, i.e., $scope.Food = Food;.

I'm still a noob and am not sure if adding Food to $scope is the right thing to do.