如何使用离子和角度在模态内显示选定的图像名称?

时间:2016-01-18 10:26:13

标签: javascript angularjs cordova ionic-framework ngcordova

我使用了cordova插件从ios图库中选择图像并显示图像。我在这里面临的问题是我想要一个模态,其中应该显示所选的图像名称,但我无法显示此模态。 这是我的代码:

我的控制器:

app.controller('ImagePickerController', function($scope, $rootScope,$cordovaImagePicker, $ionicPlatform, $cordovaContacts,$ionicModal) {
    $scope.ready = false;
    $scope.images = [];

    $scope.openGallery = function() {
        alert("hii");

        var options = {
                maximumImagesCount: 20, // Max number of selected images, I'm using only one for this example
                width: 800,
                height: 800,
                quality: 100            // Higher is better
        };

        $cordovaImagePicker.getPictures(options).then(function(results) {
            for(var i=0 ; i<results.length ; i++){
                //alert(results[i]);
                //console.log('img', imageUri);
                $scope.images.push(results[i]);
                var imagename = results[i];
                $scope.truncatedimgname = imagename.replace(/^.*[\\\/]/, '')
                alert(truncatedimgname);
            }

        }, function(err) {
        // error
        });

        openModal();
    };

$scope.openModal = function(animation) {
    alert("modal");
    $ionicModal.fromTemplateUrl('contact-modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal;
      $scope.modal.show();
    });
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };

});

我在truncatedimgname中截断了扩展名图像的名称。我想在用户点击完成按钮后选择图像并在该模态中显示其名称时显示我的模态。

2 个答案:

答案 0 :(得分:1)

您必须在成功功能中调用$scope.openModal()。 实际上results仅在此函数内可用,而异步(在用户选择之后),因为$cordovaImagePicker.getPictures(options)返回promise

$cordovaImagePicker.getPictures(options)
    .then(function (results) {
      // on success
      ...

      openModal();
    }, function(error) {
      // on error
      ...
    });

答案 1 :(得分:1)

在您发布的代码中,您已将该函数定义为$scope.openModal,但在调用该函数时,您只放置openModal(),这将找不到附加到$ scope变量的函数。

您应该将该功能称为$scope.openModal();