Input in Modal not bound to scope

ionic-v1
1

Hey,

I created a sidemenu project with
ionic start IonicTest sidemenu

And add a modal to the project, which the html part is

  1. add a button to the nav, with ng-click 
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
    <ion-nav-buttons side="right">
    <button class="button button-icon icon ion-upload" ng-click="openUpload()"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>
  1. the modal view
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Upload</h1>
</ion-header-bar>
<ion-content>
<form ng-submit="upload()">
  <div>
  <input type="text" ng-modal="data.url">
  <button class="button button-block button-positive" type="submit">Upload</button>
  </div>
</form>
</ion-content>
</ion-modal-view>

and controller part is

controller('PlaylistsCtrl', function($scope, $ionicModal) {
    $scope.data = {"url": ""};
    $ionicModal.fromTemplateUrl('templates/upload.html', {
        scope: $scope
    }).then(function(modal) {
        $scope.modal = modal;
    }, function(err) {
        console.log(err);
    });
    $scope.upload = function() {
       console.log($scope, $scope.data);
    };
    $scope.openUpload = function() {
        $scope.modal.show();
    };
};

When I filled in some in the input, and clicked the button, which calls upload method, the $scope.data is always {"url":""}. I read similar posts, which suggest using an object and here I am using one. And when I checked the scope hierarchy, I can find that data is in the parent scope (3 levels up).

Any idea where is the problem?

Thanks very much.

-Xin

2

You should use complete reference name.

$scope.someRef.someBinding
3

@siddhartha Can you please elaborate a bit? I tried using ng-model=$scope.data.url, still does not work.

Thanks.

4

Never mind, I was using ng-modal=data.url instead of ng-model=data.url :joy: