angularjs - Ionic-单击标题按钮未获取表单数据

Question

这是我的代码:

<ion-view view-title="Register">
    <ion-nav-buttons side="right">
        <button class="button button-icon button-clear ion-android-done" ng-click="createCompanyUser(signup)" ng-hide="signupForm.signupMobile.$error.maxlength || signupForm.signupMobile.$error.minlength || signupForm.signupFirstName.$error.required || signupForm.signupLastName.$error.required || signupForm.signupEmail.$error.required || signupForm.signupEmail.$error.email || signupForm.signupPwd.$error.required || signupForm.signupMobile.$error.required || signupForm.confirmpwd.$error.required">
        </button>
    </ion-nav-buttons>
    <ion-content class="" has-header>
        <form name="signupForm" novalidate>
            <ion-item class="item item-thumbnail-left">
                <img id="signupImage" src="" style="padding: 2px;border: 1px solid; height: 100px;width: 100px;">
                <h2>Select Company Logo</h2>
                <br>
                <input type="file" id="i_fileSignup" value="" accept="image/*">                
            </ion-item>
            <div class="list list-inset">

                <label class="item item-input item-floating-label">
                    <span class="input-label">First Name</span>
                    <input type="text" placeholder="First Name" name="signupFirstName" ng-model="signup.signupFirstName" required>
                </label>
                <span style="color:red" ng-show="signupForm.signupFirstName.$dirty">
                    <span ng-show="signupForm.signupFirstName.$error.required">First name field is required.</span>
                </span> 

                <label class="item item-input item-floating-label">
                    <span class="input-label">Last Name</span>
                    <input type="text" placeholder="Last Name" name="signupLastName" ng-model="signup.signupLastName" required>
                </label>
                <span style="color:red" ng-show="signupForm.signupLastName.$dirty">
                    <span ng-show="signupForm.signupLastName.$error.required">Last name field is required.</span>
                </span> 

                <label class="item item-input item-floating-label">
                    <span class="input-label">Email</span>
                    <input type="email" placeholder="Email" name="signupEmail" ng-model="signup.signupEmail" required>
                </label>
                <span style="color:red" ng-show="signupForm.signupEmail.$dirty && signupForm.signupEmail.$invalid">
                    <span ng-show="signupForm.signupEmail.$error.required">Email is required.</span>
                    <span ng-show="signupForm.signupEmail.$error.email">Invalid email address.</span>
                </span>

                <label class="item item-input item-floating-label">
                    <span class="input-label">Mobile</span>
                    <input type="tel" placeholder="Mobile" name="signupMobile" id="mobile" ng-keypress="fnMobile()" ng-minlength="10" ng-maxlength="10" ng-model="signup.signupMobile" required>
                </label>
                <span style="color:red" ng-show="signupForm.signupMobile.$dirty">
                    <span ng-show="signupForm.signupMobile.$error.required">Mobile field is required.</span>
                    <span ng-show="signupForm.signupMobile.$error.minlength">Mobile number should be at least 10 digit.</span>
                    <span ng-show="signupForm.signupMobile.$error.maxlength">Mobile number can not be at more than 10 digit.</span>
                </span> 

                <label class="item item-input item-floating-label">
                    <span class="input-label">Password</span>
                    <input type="password" placeholder="Password" name="signupPwd" ng-model="signup.signupPwd" required>
                </label>
                <span style="color:red" ng-show="signupForm.signupPwd.$dirty">
                    <span ng-show="signupForm.signupPwd.$error.required">Password field is required.</span>
                </span>

                <label class="item item-input item-floating-label">
                    <span class="input-label">Confirm Password</span>
                    <input type="password" placeholder="Confirm Password" name="confirmpwd" ng-model="signup.confirmpwd" ng-match="signupPwd" required>
                </label>   
                <span style="color:red" ng-show="signupForm.confirmpwd.$dirty">
                    <span ng-show="signupForm.confirmpwd.$error.match">Emails have to match!</span>
                    <span ng-show="signupForm.confirmpwd.$error.required">Confirm Password is required.</span>
                </span>

                <a class="button button-clear button-positive" href="#/app/login">I am already registered.</a>
                <br>
            </div>
        </form>
    </ion-content>
</ion-view>

js代码:

angular.module('serviceprovider.signup', [])

        .controller('signupCtrl', function ($scope, $location, $http) {

            $scope.createCompanyUser = function (val)
            {
                alert(JSON.stringify(val));
            };

        });

menu.html:

<ion-side-menus enable-menu-with-back-views="true" ng-click="fnMenu()">
    <ion-side-menu-content drag-content="false">
        <ion-nav-bar class="bar-stable bar-royal">
            <ion-nav-back-button class="button-icon ion-arrow-left-c">
            </ion-nav-back-button>

            <ion-nav-buttons side="right">
                <button class="button button-icon button-clear ion-navicon" ng-click="toggleRight()">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>

    <ion-side-menu side="right">
        <ion-content>
            <ion-list>

                <div class="mymenu">

                    <ion-item menu-close href="#/app/userDashboard">
                        <i class="fa fa-tachometer"></i> Dashboard
                    </ion-item>
                    <ion-item menu-close href="#/app/userMyProfile">
                        <i class="fa fa-user"></i> My Profile
                    </ion-item>
                    <ion-item menu-close href="#/app/changePwd">
                        <i class="fa fa-key"></i> Change Password
                    </ion-item>
                    <ion-item menu-close href="#/app/listProduct/0">
                        <i class="fa fa-tags"></i> Products
                    </ion-item>
                    <ion-item menu-close href="#/app/listCart">
                        <i class="fa fa-shopping-cart"></i> Cart
                    </ion-item>
                    <ion-item menu-close href="#/app/listQuotation" ng-show="userquotation">
                        <i class="fa fa-file-text-o"></i> Quotation
                    </ion-item>
                    <ion-item menu-close href="#/app/listOrder" ng-show="userorder">
                        <i class="fa fa-clipboard"></i> Order
                    </ion-item>
                </div>

                <div class="config">
                    <ion-item menu-close ng-click="signout()">
                        <i class="fa fa-sign-out"></i> Sign out
                    </ion-item>
                </div>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

我想通过点击 createCompanyUser(signup) 获取表单数据功能。但我得到未定义的值。
请帮我。
谢谢。

Answer 1

似乎signup定义了ion-content的范围指令以及当被 ion-view 引用时它未定义(2 个不同的 signup 引用)。

您可以通过定义 signup 来解决它在 Controller 范围内。它会导致 ion-content和 ion-view使用相同的 signup引用

.controller('signupCtrl', function($scope) {

  $scope.signup = {};

  $scope.createCompanyUser = function (val)
  {

    alert(JSON.stringify(val));
  };

});

http://codepen.io/anon/pen/YXGLzp

虽然这是一个黑客，

查看 Controller as syntax