尝试调用AngularJS上的函数时出错

Error when trying to call function on AngularJS

本文关键字:函数 出错 调用 AngularJS      更新时间:2023-09-26

我正在使用AngularJS、Monaca和Onsen UI构建一个跨平台应用程序。

我正试图从视图中的ng-click()调用控制器中的一个函数。然而,当我单击调用该函数的按钮时,我会收到一条错误消息,上面写着:"未捕获引用错误:checkUserLoginDetails未定义"

我的index.html如下

<!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>

我看不出哪里出了问题。

我的这是我调用函数的login.html

<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>

这是我处理逻辑(省略逻辑)的loginController.js代码

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
    }
});

在我的主app.js中,我创建了一个包含所有控制器的模块——同样,这适用于所有其他视图和控制器(由于不需要,再次从列表中省略),所以我怀疑问题是否存在。

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

我也尝试过onclick而不是ng-click,但机器人会给出相同的错误消息。

如果ons页面是一个带有transcution的指令,那么该函数在transcution主体中不可用,因为带有transcute的指令会创建自己的作用域。