CODEWITHSUNDEEP
angularjsscopeionic-frameworkpopup
Thiago Braga
Thiago Braga

Reputation: 129

$scope on $ionicPopup not recognized

I need a dynamic popup where images change its opacity when clicked. It works perfectly, but only when the popup is out of a function. I need it inside a function. This is my controller:

        $scope.imgIds = ['0', '1', '2', '3', '4', '5'];
        $scope.selectedImg = '-1';

        $scope.itemClicked = function(index){
          console.log(index);
          $scope.selectedImg = index;
        }

        /*$ionicPopup.prompt({
          title: 'Como foi seu treino?',
          scope: $scope,
          templateUrl: 'templates/icons.html'
        });*/

        //Envia Mensagem do Treino
        $scope.sendMessage = function(tempo,id_serie) {
          $ionicPopup.prompt({
            title: 'Como foi seu treino?',
            scope: $scope,
            templateUrl: 'templates/icons.html'
          }).then(function(res) {
            $http({
              url: $localStorage.url+'/serie/mensagem', 
              method: 'POST',
              data: {id_serie : id_serie, mensagem :res, tempo: tempo, datahora: $scope.getData()},
              headers : {'Content-Type':'application/json; charset=UTF-8'}
            });
          });
        }      

        //Finaliza Treino
        $scope.finalizar = function() {
          document.getElementById('timer').getElementsByTagName('timer')[0].stop();
          document.getElementById('play').className = 'button icon button-balanced button-block ion-play col';
          var tempo = document.getElementById('timer').getElementsByTagName('timer')[0].innerText;
          var confirmPopup = $ionicPopup.confirm({
            title: 'Atenção',
            template: 'Tempo: '+tempo+'<br>Finalizar Treino?',
            buttons: [
              { text: 'Cancelar',  onTap: function(e) { return false; }},
              { text: '<b>Ok</b>',
                type: 'button-positive',
                onTap: function(e) {
                  document.getElementById('timer').getElementsByTagName('timer')[0].start();
                  document.getElementById('timer').getElementsByTagName('timer')[0].stop();
                  $state.go('tab.series', {});
                  $scope.sendMessage(tempo,$scope.id_serie);
                }
              },
            ]
          });
        }

This is icons.html:

    <style>
        .selected {opacity:1;margin:auto;}
        .unselected {opacity:0.5;margin:auto;}
    </style>
    <div class='row'>
        <img ng-repeat="imgId in imgIds" src="img/{{imgId}}.png" width="30" height="30" 
           ng-class="{'selected':{{imgId}}==selectedImg,'unselected':{{imgId}}!=selectedImg}" ng-click="itemClicked(imgId)"/>
    </div>
    Algum Comentário?<br>
    <input type="text"/>

There is no error on console. But the images don't change css, the popup gets locked and the buttons doesn't do nothing.

Upvotes: 0

Views: 198

Answers (1)

Thiago Braga
Thiago Braga

Reputation: 129

I got it. The problem is I put $state.go('tab.series'); before call the popup, so the scope were different.

Upvotes: 1

Related Questions