时间戳

首页 > 解决方案 > 在离子输入上使用 AngularJs 1.x ng-model 指令的 ionic 4 未定义

angularjs - 在离子输入上使用 AngularJs 1.x ng-model 指令的 ionic 4 未定义

问题描述

我正在设置一个新的个人应用程序来练习使用cordova 和angularJs 的新离子版本4。

我制作了一个带有 1 个输入和 1 个按钮的表单。

我试图从按钮调用一个函数一切都很好。Angularjs 控制器工作正常，我已经包含了所有必要的东西。我为输入定义了 ng-model 并尝试在单击按钮时提醒输入，ng-model 总是给我未定义的。

我总是在我的网络应用程序和网站中使用 angularJs。我不知道为什么提醒离子输入给出未定义的。请问有什么想法吗？

这是我的代码：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>

角js：

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

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

标签： angularjsionic4

解决方案

经过数小时的搜索，我找到了解决方案，您必须将属性值添加到离子输入中才能获取值。

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

推荐阅读