Question

这是我的控制器代码。显示弹出窗口并单击按钮，进行一些验证：

UZCampusWebMapApp.controller('PlanCtrl',function($scope, $ionicModal, $ionicLoading, $ionicPopup) {

    $scope.confirmCreatePOI = function(data) {
        var myPopup = $ionicPopup.show({
            templateUrl: 'templates/pois/confirmCreatePOI.html',
            title: 'Confirmar creación de POI',
            scope: $scope,
            buttons: [
                {
                    text: '<b>Save</b>',
                    onTap: function() {
                        var invalidEmail = $scope.email.length==0 || $scope.email==null || typeof($scope.email)=='undefined';
                        if ($scope.emailChecked==true && invalidEmail) {
                            $ionicLoading.show({ template: 'Email is mandatory'});
                        }
                        else {
                            data.email = $scope.email;
                            $scope.finalSubmitCreatePOI(data);
                        }
                    }
                },
                { 
                   text: 'Cancel'
                }
            ]
        });
    };
});

这是调用前一个控制器函数confirmCreatePOI的指令代码：

    UZCampusWebMapApp.directive('formCreatePointOfInterest', function($ionicLoading) {
      return {
        restrict : 'A',
        scope: true,
        controller : function($scope) {      
          $scope.submit = function(data) {
            console.log("Submit form createpoint of interest",data);
            if($scope.createPOIform.$valid) {
              $scope.confirmCreatePOI($scope.data);
            } else {
              $ionicLoading.show({ template: 'El formulario es inválido', duration: 1500})
            }
          }
        }
      }
    });

这是我的templateUrl代码：

<div id="confirm-create-poi-popup">
  <p> Text </p>
  <p> Text </p>
  <div class="list">
    <ion-checkbox ng-model="emailChecked">Receive notification</ion-checkbox>
    <label class="item item-input">
      <input type="email" ng-model="email">
    </label>
  </div>
</div>

因此，在用户点击'保存'按钮（ onTap 事件）后，我想检查是否已在输入字段中输入电子邮件。

但是当我用comprobation检查它时：

var invalidEmail = $scope.email.length==0 || $scope.email==null || typeof($scope.email)=='undefined';

$scope.email.length==0表达式返回错误，因为电子邮件未定义，因此ng-model属性无法使用$scope，我在$scope.email上没有任何价值

为什么？ $ionicPopup $scope属性不起作用吗？错误地使用了？

Answer 1

我找到了一些你可以改进的地方：）

你的onTap功能应如下所示：

onTap: function() {

    // CORRECTION 1 - should use this.scope instead of $scope
    var email = this.scope.email;

    // CORRECTION 2 - check for 'undefined; first, then 'null', then 'length'
    //  (if the first OR condition is unsatisfied, the rest won't be checked for, saving time and a possible error)
    var invalidEmail = typeof(email) == 'undefined' || email == null || email.length == 0 ;

    // CORRECTION 3 - Either check for existence of 'emailChecked' or initialise it to 'false' in your templateUrl
    var emailChecked = this.scope.emailChecked;
    if (emailChecked == true && invalidEmail) {
        $ionicLoading.show({ template: 'Email is mandatory' });
    } else {
        data.email = email;
        $scope.finalSubmitCreatePOI(data);
    }
}

Answer 2

请在此处查看代码：Ionic Play - Scope Issue in Ionic Popup。

我在控制器email的{{1}}对象上创建了emailChecked和vm个变量。

$scope

最好传递封装在对象中的变量，这里是$scope.vm = { email: '', emailChecked: false }，而不是将它们作为基本类型传递/使用。 vm代表View Model。 Understanding Scopes

只是一个建议，您可能会在Toast组件中显示验证错误，这是我使用的ionicToast而不是vm。

Answer 3

我通过在templateUrl之前移动范围声明来解决这个问题。

{{1}}

Answer 4

我使用var popup = $ionicPopup.show({ title: 'Validar Ticket', scope: $scope, template: '<input type="tel" placeholder="Digite o código do ticket" ng-model="cd_ticket" >', buttons: [{ text: '', type: 'popup-close' }, { text: '', type: 'common-btn', onTap: function (e) { return this.scope.cd_ticket; } } ] }).then(function (res) { if (res) { $ionicPopup.alert({ title: 'Alerta', template: 'Ticket: ' + $scope.cd_ticket + " Resposta: " + res }); } console.log(res); });解决了这个问题：

{{1}}

$ ionicPopup templateUrl中的ng-model不适用于范围

4 个答案: