Callback and AngularJS (ng-click)

Question

I have a a button like

<div class="button" ng-repeat="event in events" 
    ng-click="selectEvent($index, event, generate)">
 Content
</div>

In which generate is supposed to be the callback function, however for some reason it is undefined when called.

Like when someone clicks on the button, I get TypeError: undefined is not a function. Where my selectEvent() code looks like

$scope.selectEvent = function ($index, event, callback) {
    // Do some stuff with $index and event

    console.log(callback); // This is undefined
    callback($scope, $http);
};

and function generate() is defined somewhere in the JS file.

Ben Lesh · Accepted Answer · 2013-12-17 20:31:08Z

5

Preface: @MaximShoustin's answer is correct. However, I'm not sure it addresses some of the other problems with what's going on here.

Also, I don't want this to sound condescending at all, it's just constructive criticism. Take it or leave it.

The wiring up of callbacks should probably be done by your controller, rather than your view.

Why?

It's harder to test the controller if the callback is wired by your view.
It's "business logic".
The view should just be concerned with displaying things and wiring up events.

It looks like you're trying to wire up business logic in your view. In other words you're saying "when you click this thing, call this function, then call this other function when you're done".

$scope.doSomething = function($index, event) {
    //do stuff
    $scope.generate();
};

$scope.generate = function (){
    //more stuff.
};

Why are you passing controller-scoped variables into a function that was passed into a function by an evaluated expression in an event binding? Seems convoluted.

I'm speaking specifically of this line:

callback($scope, $http);

What's the purpose here? Is it that "generate" is going to be different for each event? Why do you have to pass $scope and $http into it? You should have access to those throughout your controller function.

It seems like you're trying to do something crazy here. Perhaps I don't understand the problem you're trying to solve.

answered Dec 17, 2013 at 20:31

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

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

2 Comments

J D Over a year ago

The callback($scope, $http) is going to be unique for each event--- actually it is some sort of dashboard app, and this callback will generate the charts using the $scope and pulling data out using $http. This is also some sort of real time app, the callback results depends upon the events selected, and the user can select and deselect the events at any time.

Ben Lesh Over a year ago

You could look up the generate function by $index, OR, you could actually attach the generate function to the event object itself and call it after it's passed in.

Maxim Shoustin · Accepted Answer · 2013-12-17 20:12:45Z

3

Sounds like Angular doesn't see generate callback. Be sure that it defined into controller like:

$scope.generate = function(){/**/}

or

$scope.generate = function(){
    generate();// if it defined out of scope 
}

or

$scope.generate = generate;

answered Dec 17, 2013 at 20:12

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

1 Comment

J D Over a year ago

Awesome, thanks! $scope.generate = generate; Is quite elegant way to call out of scope functions, thanks for this too.

AAA · Accepted Answer · 2013-12-17 20:13:52Z

1

For this to work, generate needs to be in scope. The Angular template needs to be able to see it. So, you can define it in the controller:

$scope.generate = generate;

and that would assign your current generate function to be visible to Angular.

answered Dec 17, 2013 at 20:13

AAA

1,3841 gold badge10 silver badges15 bronze badges

Collectives™ on Stack Overflow

Callback and AngularJS (ng-click)

3 Answers 3

The wiring up of callbacks should probably be done by your controller, rather than your view.

Why are you passing controller-scoped variables into a function that was passed into a function by an evaluated expression in an event binding? Seems convoluted.

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

The wiring up of callbacks should probably be done by your controller, rather than your view.

Why are you passing controller-scoped variables into a function that was passed into a function by an evaluated expression in an event binding? Seems convoluted.

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related