Блог

Главная - Вопросы по программированию - ionic 4 с использованием AngularJS 1.x директива ng-model для ввода ion не определена

ionic 4 с использованием AngularJS 1.x директива ng-model для ввода ion не определена

#angularjs #ionic4

#angularjs #ionic4

Вопрос:

Я настраиваю новое персональное приложение для практики на новой ionic версии 4 с cordova и AngularJS.

Я создал форму с 1 входом и 1 кнопкой.

Я попытался вызвать функцию с кнопки, все хорошо. Контроллер Angularjs работает нормально, я включил все необходимое. Я определил ng-model для ввода и попытался предупредить ввод, когда я нажимаю на кнопку, ng-model всегда выдает мне undefined.

Я всегда использую AngularJS в своих веб-приложениях и веб-сайтах. Я не знаю, почему оповещение ion-input дает undefined. Любая идея, пожалуйста?

Это мой код: HTML:

 <html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <script src="js/angular.min.js"></script>
        <link href="js/@ionic/core/css/ionic.bundle.css" rel="stylesheet" type="text/css"/>
        <script src='js/@ionic/core/dist/ionic.js'></script>
        <script src="js/angular-ui-router.js"></script>
        <script src="./app.js"></script>
        <title>Hello World</title>
    </head>
    <body ng-app="app" ng-controller="apc">
    <ion-app>      
        <ui-view>
            <ion-page class="show-page">
    <ion-header>
        <ion-toolbar>
            <ion-title>Login </ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content class="content" padding>
        <ion-item>
            <ion-label position="floating" color="danger">email</ion-label>
            <ion-input type="text"  ng-model="email"></ion-input>

        </ion-item> 
            <ion-button color="primary" ng-click="test();">secondary</ion-button>
    </ion-content>
</ion-page>

        </ui-view>
    </ion-app>    
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>

angularjs :

 var app = angular.module('app', []);
app.controller('apc', function($scope, $http) {

$scope.test = function(){
alert($scope.email);
};
});

Ответ №1:

После нескольких часов поиска я нашел решение, вам нужно добавить значение атрибута во ввод ion, чтобы получить значение.

 <ion-item>
<ion-label position="floating" color="danger">email</ion-label>
<ion-input type="text" value="{{email}}" ng-model="email"></ion-input>
</ion-item>