ionic ng-model controller中取不到值（input）

来源：互联网发布：彩虹六号配件知乎编辑：程序博客网时间：2024/05/17 08:47

一、问题描述在使用ionic的时候，对于input绑定ng-model默认情况下载控制器中获取不到改变的值

1.在自定义控制器中获取不到改变的值

2.在页面绑定可以

原因：

1.ng-model取不到值是因为$scope作用域的问题

2.<ion-content>等指令也有自己的控制器，input的ng-model很有可能绑定到了指令的$scope上了

解决方案：

对于input的ng-model绑定使用对象object方式绑定，可以跨作用于访问。

controller中定义一个集合：

$scope.data ={    text1 : "",    text2: "",}

页面中分别定义 ng-model="data.text1",ng-model="data.text2"。

在controller中直接取$scope.data.text1就能得到<input>或者<textarea>中的值了

特别说明：初始化绑定需要是object对象。

示例如下：

HTMl：

<body ng-app="page3" ng-controller="MyCtrl">    <ion-header-bar class="bar-positive" align-title="left">        <buttons>            <button class="button icon-button" ng-click="doSomething()">                <i class="icon ion-chevron-left"></i>            </button>        </buttons>        <h1 class="title">链接测试页面1</h1>    </ion-header-bar>    <ion-content>        <div class="list">            <div class="item">                当前地址：{{location.href}}            </div>            <div class="item">                <a href="http://www.gongjuji.net">www.gongjuji.net</a>            </div>            <div class="item">                <a href="http://www.gongjuji.net/Content/Files/HostsOperate(V1.0.0.2).zip">http://www.gongjuji.net/Content/Files/HostsOperate(V1.0.0.2).zip</a>            </div>            <div class="item item-input">                <input type="text" ng-model="data.txt1" ng-change="txtChange();" />            </div>            <div class="item item-assertive" ng-click="showTxt();">                显示文本            </div>        </div>    </ion-content>

js：

angular.module('page3', ['ionic']).controller('MyCtrl', function ($scope) {    $scope.doSomething = function () {        try {            //在inappbrowser中window.close()方法被禁用，也不会抛出异常            window.close();        } catch (e) {            alert(e.message);        }    }    $scope.txtChange = function () {        console.info($scope.data.txt1);    }    $scope.showTxt = function () {        $scope.data.txt1 = "张无忌";    }    //初始化设置，data必须为object类型    $scope.data = { txt1: "张三丰" };});

更多：cordova-plugin-file 文件操作整理（三）

Apache Cordova开发环境搭建（二）VS Code

Cordova Ajax请求跨域问题整理

0 0