Question

我想用一个按钮调用popup和一些js函数。我需要使用此功能更改弹出窗口中的文本。我的弹出代码是：

angular.module('starter')
  .controller('PopupCtrl', function($scope, $ionicPopup, $timeout) {
    $scope.showAlert = function() {
      var alertPopup = $ionicPopup.alert({
        title: '<div id="location-status"></div>',
        template: '<div class="text-center"><ion-spinner icon="ripple" class="spinner-positive"></ion-spinner></div>'
      });
    };
  });

目前功能很简单：

function writeText() {
  document.getElementById("location-status").innerHTML = "Some text"
}

按钮：

<button class="button button-icon icon ion-android-locate" ng-click="showAlert()" onclick="writeText()"></button>

当我的div id =“location-status”在index.html文件中某处时，它可以正常工作。它在弹出窗口中不起作用。怎么了？

Answer 1

您可以使用ng-bind指令在那里添加文本。使用ng-click代替onclick

<强>代码

$scope.showAlert = function() {
  var alertPopup = $ionicPopup.alert({
    title: '<div id="location-status" ng-bind="textToBeShown"></div>',
    template: '<div class="text-center"><ion-spinner icon="ripple" class="spinner-positive"></ion-spinner></div>'
  });
};

$scope.writeText = function(){
    $scope.textToBeShown = "Some Text."
}

<强>更新

$ionicPopup.alert会返回一个承诺，您可以使用.then函数。因为你想访问警报弹出窗口的DOM。在.then函数内部，您可以在页面上呈现DOM。你可以从那里调用writeText方法。

$scope.showAlert = function() {
  var alertPopup = $ionicPopup.alert({
    title: '<div id="location-status" ng-bind="textToBeShown"></div>',
    template: '<div class="text-center"><ion-spinner icon="ripple" class="spinner-positive"></ion-spinner></div>'
  }).then(function(){
      writeText(); //Native javascript function.
  })
};

我不鼓励你这样做，通过这种方式进行DOM操作在AngularJS中被视为BAD模式

离子弹出窗口中的getelementbyid

1 个答案: