单击 AngularJS 调用函数

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.

Answer 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, ie, 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.