ng-model doesn't work btw 2 directives (ionic)

Question

http://play.ionic.io/app/81ff26fc9a28

<body ng-app="app">
    <ion-pane ng-controller="myCtrl">
      <ion-header-bar class="bar-stable">
      </ion-header-bar>
      <ion-content class="padding">
        <input ng-model="myInput" style="border:1px solid #ddd;width:100%;padding:5px" type="text" placeholder="search"/>


        <br>
        <br>
        <br>
        <br>
        <br>
         <ion-footer-bar ng-show="!loading" align-title="center">
    <div class="padding" style="position:absolute;bottom:0;width:100%">
      <button ng-click="search(myInput)" class="button button-block button-positive footer-btn" type="submit">able to get myInput value if put within ion-content</button>
    </div>
  </ion-footer-bar>


      </ion-content>

      <ion-footer-bar ng-show="!loading" align-title="center">
    <div class="padding" style="position:absolute;bottom:0;width:100%">
      <button ng-click="search(myInput)" class="button button-block button-positive footer-btn" type="submit">cannot get myInput value here</button>
    </div>
  </ion-footer-bar>


    </ion-pane>
  </body>

How to solve this problem? for the styling sake, I have to put the click event and input field in 2 different directives, but that causes the problem I couldn't get the value of ng-model.

Post the relevant code, don't just give a link to another site. — Yatrix, May 13 '16 at 01:44

score 1 · Answer 1 · edited May 23 '17 at 10:28

This is a case where using $scope is problematic. One possible solution is to use the ControllerAs syntax instead.

The ControllerAs syntax allows you to easily identify which controller a particular function or property belongs to, and forces the "always use a dot" rule for angular, avoiding any prototype inheritance issues.

This isn't the only way to solve the problem, but this is a solution that will help build a more robust application with fewer issues related to $scope.

http://play.ionic.io/app/df429e85d209

angular.module('app', ['ionic'])



.controller('myCtrl', function() {
  var ctrl = this;
  ctrl.search = function(value) {
    alert(value);
  };
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
  <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>

<body ng-app="app">
  <ion-pane ng-controller="myCtrl as ctrl">
    <ion-header-bar class="bar-stable">
    </ion-header-bar>
    <ion-content class="padding">
      <input ng-model="ctrl.myInput" style="border:1px solid #ddd;width:100%;padding:5px" type="text" placeholder="search" />


      <br>
      <br>
      <br>
      <br>
      <br>
      <ion-footer-bar ng-show="!loading" align-title="center">
        <div class="padding" style="position:absolute;bottom:0;width:100%">
          <button ng-click="ctrl.search(ctrl.myInput)" class="button button-block button-positive footer-btn" type="submit">able to get myInput value if put within ion-content</button>
        </div>
      </ion-footer-bar>


    </ion-content>

    <ion-footer-bar ng-show="!loading" align-title="center">
      <div class="padding" style="position:absolute;bottom:0;width:100%">
        <button ng-click="ctrl.search(ctrl.myInput)" class="button button-block button-positive footer-btn" type="submit">cannot get myInput value here</button>
      </div>
    </ion-footer-bar>


  </ion-pane>
</body>

</html>

Bryan Chen · Accepted Answer · 2016-05-13T01:55:53.123

This is fixed code http://play.ionic.io/app/77035b24f58a

The issue is the $scope between two buttons are different, so the $scope.myInput value is not shared correctly.

One solution is add a $scope.model = {}; and refer to the model object like ng-model="model.myInput" and ng-click="search(model.myInput)". Then the inner scope will be access to the same model object.

This is the simplified code to demo this issue

var scope = {};
scope.myInput = '1';
var innerScope = Object.create(scope);
console.log(innerScope.myInput); // 1
innerScope.myInput = '2'; // myInput is 2 on innerScope
console.log(innerScope.myInput); // 2
console.log(scope.myInput); // 1 <-- but still 1 on scope

scope.model = {};
scope.model.myInput = '1';
console.log(innerScope.model.myInput); // 1
innerScope.model.myInput = '2'; // 
console.log(innerScope.model.myInput); // 2
console.log(scope.model.myInput); // 2 <-- modify model.Input is visible on parent scope because they are modifying a same model object

ng-model doesn't work btw 2 directives (ionic)

2 Answers2