使用angular-js离子弹出框绑定数据

时间:2014-08-15 08:06:29

标签: angularjs ionic-framework

我有一些奇怪的问题,我似乎无法找到解释。 我显示一个带有单个输入的弹出窗口,我绑定到我的范围内的变量我将$ scope传递给弹出窗口。 绑定工作,我可以看到设置的变量,它随着我的输入而改变。但是一旦我关闭弹出窗口并在“点击”功能上注销该范围变量“它似乎又恢复到原始值。

编辑:用于演示一般问题的笔: http://codepen.io/anon/pen/ariDh

代码:

var sendPopup = $ionicPopup.show({
     title: $translate.instant(popupTitle),
     subTitle: $translate.instant('POPUP_WITH_MESSAGE_SUBTITLE'),
     templateUrl:  'templates/leave-message-popup.html',
     scope: $scope,
     buttons: [
      { text: $translate.instant('BUTTON_CANCEL') },
      {
        text: $translate.instant('BUTTON_SEND'),
        type: 'button-positive',
        onTap: function(e) {
                console.log("contact message:" + $scope.contactMessage);
                if (!$scope.contactMessage) {
                  console.log("preventing default");
                  e.preventDefault();
                } else {
                  $scope.sendData(contactType);
                }
              }
      },
    ]


   });

模板:

<input type="text" ng-model="contactMessage" name="message" placeholder="{{'PLACEHOLDER_CONTACT_MESSAGE' | translate}}" required autofocus>
{{contactMessage}}

1 个答案:

答案 0 :(得分:8)

您的codepen的这个修订版本显示了这个工作:http://codepen.io/anon/pen/rgBLa

将变量更改为正确传递给弹出窗口的作用域上的对象允许在变化时将其绑定回控制器作用域。由于传递给$ ionicPopup时管理范围的方式,这是必需的。

$scope.contactMessage = { text: "text" }

然后更新标记以正确查看范围内的此属性。

<input type="text" ng-model="contactMessage.text" name="message">
  {{contactMessage.text}}

我希望这会对您的问题有所帮助。