如何将文本发送到模态和模型文本到主屏幕?

时间:2015-04-24 10:17:29

标签: angularjs angularjs-directive angularjs-scope ionic-framework ionic

您能否告诉我如何将文本发送到模态视图和模型视图文本到主屏幕?在我的演示中,我有一个文本字段和按钮。我需要将输入文本发送到模态和模态我有一个文本字段和按钮我需要在主屏幕上发送该输入字段值。我们如何将主屏幕与模态屏幕进行通信。我需要将数据发送到模态并从角度获取模态数据 这是我的代码:

http://codepen.io/anon/pen/BNabez

var app =angular.module('ionicApp',['ionic']);
app.controller('cntr',function($scope,$http,$ionicModal){
 $ionicModal.fromTemplateUrl('templates/modal.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modalFirst = modal;
  });
  $scope.openmodel=function(){
   // alert('d');
    $scope.modalFirst.show()
  }


})

1 个答案:

答案 0 :(得分:2)

您必须在范围内声明变量然后绑定它 我已经编辑了你的codepen

http://codepen.io/anon/pen/OVJGxm

<强> HTML:

 <html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Sign-in, Then Tabs Example</title>

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

  </head>

  <body ng-controller="cntr">

   <ion-view>
    <ion-header-bar class="bar-balanced">
        <h1 class="title">load data before modal show</h1>
    </ion-header-bar>
    <ion-content scroll="false">

     <button ng-click="openmodel()">send data on popup screen </button>
       <input type="text" placeholder="Say Something" ng-model="input.saySomething"/>
      <h1>{{item.text}}</h1>
    </ion-content>
    <ion-footer-bar class="bar-balanced">
        <h1 class="title">Footer</h1>
    </ion-footer-bar>
</ion-view>
   <script id="templates/modal.html" type="text/ng-template">
      <ion-modal-view>
      <ion-header-bar class="bar-balanced">
        <h1 class="title">departure</h1>
    </ion-header-bar>
    <ion-content>
      <h1>naveen+{{input.saySomething}}</h1>
       <input type="text" ng-model="item.text">
      <button>send to main screen</button>
    </ion-content>
    <ion-footer-bar class="bar-balanced">
        <h1 class="title">Footer</h1>
    </ion-footer-bar>
      </ion-modal-view>
    </script>
  </body>
</html>

<强> JS:

var app =angular.module('ionicApp',['ionic']);
app.controller('cntr',function($scope,$http,$ionicModal){
  $scope.item={};
  $scope.input={};
 $ionicModal.fromTemplateUrl('templates/modal.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modalFirst = modal;
  });
  $scope.openmodel=function(){
   // alert('d');
    $scope.modalFirst.show()
  }


})
相关问题