Error when trying to call function on AngularJS

Question

I am building a cross platform app using AngularJS, Monaca and Onsen UI.

I am trying to call a function in my controller from a ng-click() on my view. However, when I click the button that calls the function I get an error message saying: "Uncaught ReferenceError: checkUserLoginDetails is not defined"

My index.html looks as follows

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <!-- Usual scripts goes here -->
    <script src="js/app.js"></script>
    <script src="js/login.js"></script>
    <script src="js/sharedProperties.js"></script>
</head>

<body>
    <ons-navigator var="myNavigator" page="login.html"></ons-navigator>
</body>
</html>

I cant see where I am going wrong here.

My This is my login.html where I call my function.

<div ng-controller="LoginController">
    <ons-page>
        <form class="login-form" style="text-align: center" name="myForm">
            <section style="padding: 8px">
                <input type="password" 
                    class="text-input--underbar" 
                    required 
                    minlength="3" 
                    maxlength="4" 
                    ng-model-options="{ debounce : 500 }"
                    placeholder="User ID" 
                    ng-model="userID" >
            </section>


            // Button not working here
            <section style="padding: 0 8px 8px">
                <ons-button var="saveBtn" ng-disabled="myForm.$invalid" modifier="large" ng-click="checkUserLoginDetails()">Log In</ons-button>
            </section>
        </form>
    </ons-page>
</div>

And this is my loginController.js code that handles the logic (logic omitted)

var login = angular.module("loginController", []);
login.controller("LoginController", function($scope, $http, SharedProperties)
{   
    // Watch for changes in the User ID text field
    $scope.$watch('userID', function(newVal, oldVal)
    {
       // Code omitted but WORKING
    });

    // Check user Logins
    $scope.checkUserLoginDetails = function()
    {
        console.log("Getting here..."); // Not getting here
    }
});

And in my main app.js I create the module that holds all the controllers - again this is working for all other views and controller (again omitted from the list as not needed) so I doubt the issue is here.

var app = angular.module("myApp", ['onsen', 'sharedProperties', 'loginController']);

I have also tried onclick instead of ng-click but bot give the same error message.

Are you sure that your section is under the loginController? — Daniel Krom
– Daniel Krom, Commented May 18, 2016 at 9:55
Yes I am sure. I also have other functions on that controller to e.g. $watch() for changes in text fields and they are all working as expected. My view is setup as <div ng-controller="LoginController"> <ons-page><section>...my section here</section></ons-page></div> — heyred
– heyred, Commented May 18, 2016 at 9:58
we need more code to see what is wrong there because there is no reason for ng-click to not work and therefore I'd like to see the html section and app section. Please check if all things are initialized properly. — Gandalf the White
– Gandalf the White, Commented May 18, 2016 at 10:03
can you try with normal button instead of ons-button. I just wanted to know. — riteshmeher
– riteshmeher, Commented May 18, 2016 at 10:32

DB.Null · Accepted Answer · 2016-05-18 10:46:53Z

1

If ons-page is a directive with transclution, then the function isn't available in the transclution body since directives with transclude create their own scopes.

answered May 18, 2016 at 10:46

DB.Null

1,2048 silver badges11 bronze badges

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

2 Comments

heyred Over a year ago

Can you suggest a possible solution in this case please?

DB.Null Over a year ago

you can try to move the logic from the loginController into the ons-page directive

Collectives™ on Stack Overflow

Error when trying to call function on AngularJS

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related