AngularJS call function from click

Question

I can't for the life of me figure out why I can't call this function in my controller.

On clicking an accordion-group attribute I get this error:
Uncaught ReferenceError: getConversationsForUser is not defined

Here is the html:

<ui-view id="smtConvoCard" layout="column" layout-fill layout-padding>
    <div layout="row" flex layout-align="center center">
        <md-card flex-gt-sm="90" onresize="resize()" flex-gt-md="80">
            <md-card-content>
                <md-list>
                    <h2>Conversations</h2>
                    <accordion close-others="oneAtATime">
                        <accordion-group heading="{{contact.FirstName}} {{contact.LastName}}" ng-repeat="contact in contacts" onclick="getConversationsForUser(contact.UserUID)">
                            <div>Test</div>
                        </accordion-group>
                    </accordion>
                </md-list>
            </md-card-content>
        </md-card>
    </div>
</ui-view>

Here is the controller being used (partial code):

controller('convCtrl', ['$scope', 'messageFactory', function ($scope, messageFactory) {
        var currentUser = helpers.storage.get('UID');
        $scope.contacts = [];

        $scope.getContacts = function () {
            /*Does stuff*/
        };

        //This is the function it is trying to call
        $scope.getConversationsForUser = function (userUID) {
            /*Does stuff*/
        };

        //Setup
        $scope.getContacts();
    }]);

I've tried changing the onclick even to a different element, calling the getContacts function instead and I always get Uncaught ReferenceError

I know that function is within my scope because I'm data binding the contacts variable to the page.

because its defined on your $scope, not in global space which onclick requires, you are wanting ng-click — Patrick Evans
– Patrick Evans, Commented Jun 12, 2015 at 22:49

Ivan Gabriele · Accepted Answer · 2015-06-12 22:58:14Z

1

Try :

<accordion-group heading="{{contact.FirstName}} {{contact.LastName}}" ng-repeat="contact in contacts" ng-click="getConversationsForUser(contact.UserUID)">
    <div>Test</div>
</accordion-group>

And don't forget to insert a ng-controller="convCtrl" in an element wrapping your accordion.

UPDATE

I add a little explanation : the $scope in a controller MySuperController have to be linked in the DOM via a ng-controller="MySuperController" attribute added to a tag (= a DOM element), so that your $scope variable will represent any variable within this controller.

As soon as you create a function attached to this scope ($scope.myFunction = function () { /* ... */ }), you can then call it, i.e., when an event is fired. This is the case via the ng-click directive that attaches an event handler to the element on which it's set as an attribute.

edited Jun 12, 2015 at 22:58

answered Jun 12, 2015 at 22:50

Ivan Gabriele

6,9806 gold badges44 silver badges63 bronze badges

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

1 Comment

Patrick Evans Over a year ago

Please do not just put Try ...code block here... explain what you changed and why they should use it.

Collectives™ on Stack Overflow

AngularJS call function from click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related