current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

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.

share|improve this question
2  
wrong angular function, write this way $scope.itemClick = function(cb) {..........}, it may help – Jinna Balu Dec 17 '15 at 9:53
    
itemClick(item) is what you maybe want to achieve. – Johannes Jander Dec 17 '15 at 9:59
    
@JinnaBalu it is a typo error - i just type them, anyway it is in the correct format now, same with my code. – user3187337 Dec 17 '15 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 Balu Dec 17 '15 at 10:06
up vote 1 down vote accepted

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?

share|improve this answer
    
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. – user3187337 Dec 17 '15 at 9:57
    
so put that in the scope-function. Also like @Jinna Balu pointed out. Your scope function is not really valid javascript – Gustav Dec 17 '15 at 9:58
    
as Gustav mentioned, you cannot access "not-angular-variables" in a parsed expression – Mephiztopheles Dec 17 '15 at 9:58
    
@Mephiztopheles and Gustav got your point - but is it good idea to open up modal dialogs or other DOM related stuff inside controller function? – user3187337 Dec 17 '15 at 10:06
    
sure, there are services for this purpose. angular ui bootstrap for example has a $modal-service which you can use from your controller – Gustav Dec 17 '15 at 10:08
up vote 0 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.