Question

我有一个使用离子框架编写的注册模板/视图，但每当我提交注册表单时，ng-model $scope.account的值仍然是 Undefined 。据我说，主要原因是我无法在signup.html中添加控制器名称（SingupController）。每当我添加ng-controller =＆＃34; SingupController＆＃34;并运行应用程序浏览器关闭消息＆＃34;无法附加。操作超时＆＃34;

我正在使用Visual Studio 2013，AngularJS，Ionic和Adobe PhoneGap。

这是我正在使用的代码。

singup.html：

<ion-header-bar>
    <button class="button" ng-click="closeSignup()">Cancel</button>
    <h1 class="title">Sign up</h1>
</ion-header-bar>

<ion-content ng-controller="SignupController">
    <form ng-submit="doSignup()">
        <div class="list list-inset">

            <label class="item item-input">
                <input type="text" placeholder="First Name" ng-model="account.firstName">
            </label>

            <label class="item item-input">
                <input type="text" placeholder="Last Name" ng-model="account.lastName">
            </label>

            <label class="item item-input">
                <input type="email" placeholder="Email" ng-model="account.email">
            </label>

            <label class="item item-input">
                <input type="text" placeholder="School" ng-model="account.school">
            </label>

            <label class="item item-input">
                <input type="text" placeholder="Country" ng-model="account.country">
            </label>
        </div>
        <div class="list list-inset">
            <label class="item item-input">
                <input type="password" placeholder="Password" ng-model="account.password">
            </label>

            <label class="item item-input">
                <input type="password" placeholder="Confirm Password" ng-model="account.confirmPassword">
            </label>
            <p>Minimum 8 characters a-Z, 0-9</p>
        </div>

        <label class="item">
            <input type="submit" class="button button-block button-balanced" value="Sign up" />
        </label>
    </form>

</ion-content>

我在controller.js中的控制器代码如下：

angular.module('angularApp.controllers', [])

.controller('SignupController', ['$scope', '$ionicModal', '$timeout', '$http', function ($scope, $ionicModal, $timeout, $http) {
    // Form data for the login modal

    $scope.account = {};

    // Create the signup modal that we will use later
    $ionicModal.fromTemplateUrl('templates/signup.html', {
        scope: $scope
    }).then(function (modal) {
        $scope.modal = modal;
    });

    // Triggered in the signup modal to close it
    $scope.closeSignup = function () {
        $scope.modal.hide();
    };

    // Open the signup modal
    $scope.signup = function () {
        $scope.modal.show();
    };
    $scope.doSignup = function () {


        var config = {
            method: "POST",
            url: "http://localhost:60923/api/account/",
            data: $scope.account
        };
        $http(config).success(function (data) {
            $scope.mydate = data;
        });

    };
}])

的index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet" />
<link href="css/app-overrides.css" rel="stylesheet" />
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<script src="scripts/platformOverrides.js"></script>

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="scripts/ng-cordova.min.js"></script>
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
</head>

<body ng-app="angularApp">

<ion-nav-view></ion-nav-view>

</body>
</html>

我真的不确定问题出在哪里？如果您在我的代码中发现任何问题，请告诉我。提前谢谢。

Answer 1

在控制器中，只需将$scope.account = { }添加到初始化代码中。问题几乎可以肯定是account是在子范围上动态定义的。我无法证明这一点，因为我没有在帖子中看到生成的HTML，但我之前已多次看到过这种情况。

无法将ng-controller添加到离子视图模型中

1 个答案: