Question

我有以下代码 Check on codepen

<html ng-app="optik">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
 <title>Side Menu query replication</title>

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

<body ng-controller='ContentController'>
<ion-side-menus>
  <ion-side-menu-content>
    <ion-header-bar class="bar bar-header bar-positive">
      <button class="button button-icon icon ion-navicon" menu-toggle="left"></button>
      <div class="h1 title"> Ionic Optik! </div>
      <button class="button button-icon icon ion-more" ng-click="console.log('clickie')"></button>
    </ion-header-bar>
    <ion-content has-header="true">
      <input type="text" placeholder="Nombre" ng-model="query.test" />
          <h3> Hola {{query.test}}</h3>
      <!--
              <ion-list>
                <ion-item ng-repeat="cliente in clientes">
                  {{cliente.nombre}}
                </ion-item>
              </ion-list>
            -->
    </ion-content>
  </ion-side-menu-content>
  <ion-side-menu side="left" expose-aside-when="large">
    <ion-header-bar class="bar bar-header bar-stable">
      <div class="h2 title"> Busqueda </div>
    </ion-header-bar>
    <ion-content has-header="true">
      <ul class="list">
        <label class="item item-input">
          <input type="text" placeholder="Nombre" ng-model="query.nombre" />
        </label>
        <label class="item item-input">
          <input type="text" placeholder="Ciudad" />
        </label>
        <div class="item range">
          <i class="icon ion-volume-low"></i>
          <input type="range" name="meses" min="0" max="12" />
          <i class="icon ion-volume-high"></i>
        </div>
      </ul>
      <h3>{{query.nombre}}<h3>
      <h3>Hola {{query.test}}</h3>
      <h3>{{texto}}</h3>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>
</body>
</html>

Js文件

angular.module('optik', ['ionic']);

angular
.module('optik')
.controller('ContentController', ContentController);

ContentController.$inject = ['$scope', '$ionicSideMenuDelegate'];

function ContentController($scope, $ionicSideMenuDelegate) {
$scope.texto = "Hola mundo!";
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}

它在侧视图中包含一个文本输入，其中ng-model ='query.nombre'。它会更新sidenav中的{{query.nombre}}，但不会更新右窗格中的{{query.nombre}}。知道问题可能是什么？

Answer 1

您的问题是$ scope.query未定义到您的控制器中。

因此$scope.query.test无效。

添加您的控制器定义：$scope.query={}

function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.texto = "Hola mundo!";
  $scope.query={}
  $scope.toggleLeft = function() {
  $ionicSideMenuDelegate.toggleLeft();
  };
}

输入ng-model未在主视图中更新

1 个答案: