Call a function defined in parent scope inside ng-repeat

Question

Original question: (please skip to the EDIT)

I am trying to make images of books which I am receiving clickable.

<div ng-app="myApp" ng-controller="myAppCrtl"> 
    <ul ng-repeat="x in browseBooks">
        <div id="{{x.bookId}}">
            <li>        
            <a href="" ng-click=logout()><img style="max-width:100px;" ng-src="{{x.img}}"></a>
                <p>{{x.name}}</p>
                <p>{{x.price}}</p>
                <br>
            </li>   
        </div>
    </ul>
</div>

Following the solutions provided here doesn't work, and the link to the angularjs site is broken.

I know the function logout works perfectly, as with button it is executing. The problem with <a> tag I am unable to make the image trigger a desired function.

EDIT

I understand what my problem is, ng-repeat creates a child scope for each item in the loop. So trying to access the logout() method defined in parent scope is not working. ?

Any idea? even replacing "logout()" with $parent.logout() isn't working...

EDIT2

It is working, however all changes are local to inner scope...

At first glance... isn't it that the lack of `"` around `logout()` in `ng-click` attribute breaks your anchor making it unclickable? — Matt from vision.app, Feb 19 '18 at 21:06
Look here: https://stackoverflow.com/questions/14867558/html-tag-a-want-to-add-both-href-and-onclick-working. Use: `Item` unless you have some custom javascript logic to process `ng-click` attributes. — Matt from vision.app, Feb 19 '18 at 21:11
I found [this](https://stackoverflow.com/questions/34476550/html-button-inside-ng-repeat-is-not-working) question which is interesting — Tony Tannous, Feb 19 '18 at 21:25
@MattfromVisionApp any idea how to make the scope of what is created inside ng-repeat see my logout function? — Tony Tannous, Feb 19 '18 at 21:41
In your last edit you used `$parent` which looks like PHP, where you should use java, so drop the `$`. — Matt from vision.app, Feb 19 '18 at 21:55

score 0 · Accepted Answer · answered Feb 19 '18 at 21:07

0

You need quotes around logout()

and then you could use javascript:void(0) if needed and # doesn't work for you

<a href="javascript:void(0)" ng-click="logout()"><img style="max-width:100px;" ng-src="{{x.img}}"></a>

answered Feb 19 '18 at 21:07

abney317

7,760
6
32
56

score 0 · Answer 2 · answered Feb 19 '18 at 21:34

0

Have you tried:

   <li ng-click="logout()">        
    <a href="#"><img style="max-width:100px;" ng-src="{{x.img}}"></a>
        <p>{{x.name}}</p>
        <p>{{x.price}}</p>
        <br>
    </li>

answered Feb 19 '18 at 21:34

David Anthony Acosta

4,766
1
19
19

Call a function defined in parent scope inside ng-repeat

2 Answers2