callback function undefined in ng-click function using ng-repeat in angularjs

Question

I am having hard time calling callback function inside ng-click under ng-repeat. Below is the snippet.

It is calling the ng-click function but when it is time to call the callback function - it fails - undefined - cb is not a function message

HTML part

<div ng-repeat="item in items">
  <span ng-click="itemClick(cb)">{{item}}</span>
</div>

Javascript

....
<script type="text/javascript">
  function cb(){
     alert('Hey');
  }
</script>

Angular

...
$scope.itemClick = function(cb) {
    cb();
};

I am new to angular.

wrong angular function, write this way $scope.itemClick = function(cb) {..........}, it may help — Jinna Baalu
– Jinna Baalu, Commented Dec 17, 2015 at 9:53
@JinnaBalu it is a typo error - i just type them, anyway it is in the correct format now, same with my code. — user3187337
– user3187337, Commented Dec 17, 2015 at 10:02
in itemClick function you are passing 'cb' as the variable, that is not used and you are trying to call cb() method. In Html on ng-click=ItemClick(cb), how you got cb variable. can you post you complete code — Jinna Baalu
– Jinna Baalu, Commented Dec 17, 2015 at 10:06

Gustav · Accepted Answer · 2015-12-17 09:54:24Z

1

This is because when writing <span ng-click="itemClick(cb)">{{item}}</span> you expect cb to be a property on scope, but its not.

Its not very good practice to put functions global like this, like you're trying with cb. Why can't you just write whatever code you want to run ( alert('hey')) right inside $scope.itemClick-function?

answered Dec 17, 2015 at 9:54

Gustav

3,6265 gold badges28 silver badges42 bronze badges

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

6 Comments

user3187337 Over a year ago

alert('hey') is just an example - in reality I am going to show reveal modal. I would like to open the modal on the html file where modal is defined.

Gustav Over a year ago

so put that in the scope-function. Also like @Jinna Balu pointed out. Your scope function is not really valid javascript

Xandrios93 Over a year ago

as Gustav mentioned, you cannot access "not-angular-variables" in a parsed expression

user3187337 Over a year ago

@Mephiztopheles and Gustav got your point - but is it good idea to open up modal dialogs or other DOM related stuff inside controller function?

Gustav Over a year ago

sure, there are services for this purpose. angular ui bootstrap for example has a $modal-service which you can use from your controller

|

Xandrios93 · Accepted Answer · 2015-12-17 09:53:51Z

0

angular will replace itemClick(cb)
with kinda
v1[...];var v0;if("cb" in s){v0 = s.cb} else if("cb" in l){v0 = l.cb} return v1(v0).

s is the scope and l is a object you can define when you want to pass variables into a function which you define in a directive: {click:"&"}
when you want to call the click-function, you do $scope.click({$event:event}) and this object will be passed as l.
so your global created cb is not available in your scope.

Greetings

answered Dec 17, 2015 at 9:53

Xandrios93

2,3251 gold badge16 silver badges28 bronze badges

Collectives™ on Stack Overflow

callback function undefined in ng-click function using ng-repeat in angularjs

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related