Question

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

我试图在我的视图中通过ng-click（）调用我的控制器中的函数。但是，当我单击调用该函数的按钮时，我收到一条错误消息：“ Uncaught ReferenceError：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 ，但是bot会给出相同的错误消息。

Answer 1

如果ons-page是一个带有transclution的指令，那么该功能在transclution主体中是不可用的，因为带有transclude的指令会创建它们自己的范围。

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

1 个答案: