javascript - 使用回调更新 Ionic UI 元素

标签 javascript angularjs ionic-framework appery.io

故事: 我正在使用 appery.io 制作小型移动应用程序,它将扫描二维码并根据值隐藏/显示按钮。

问题: 当我更改变量(名称:隐藏) bool 值时按钮将隐藏:

$scope.QRscanner = function (_callback) {
     cordova.plugins.barcodeScanner.scan(
          function (result)
          {
              if(result.cancelled!=1){

                $scope.hide = false;
                $scope.scannedValue = result.text;
                _callback(false);
              }
              else
              {    _callback(true);
                  alert("Operation cancelled");

              }

          },
          function (error) {
              $scope.hide = true;
          },
          {
              preferFrontCamera : true, // iOS and Android
              showFlipCameraButton : true, // iOS and Android
              showTorchButton : false, // iOS and Android
              torchOn: false, // Android, launch with the torch switched on (if available)
              prompt : "Place a barcode inside the scan area", // Android
              resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
              formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
              orientation : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
              disableAnimations : true // iOS
          }
       );
}

这是回调函数;

$scope.Callback = function (result) 
{
alert("result"+result);
$scope.hide=result;
}

最后我将在 ng-click 中使用参数回调函数名称调用此 QRscanner 函数。

QRscanner(Callback);

我对 ionic + Angular 很陌生。非常感谢您的帮助。

最佳答案

假设您有以下两个按钮:

<button ng-click="QRscanner()"> Scan Code </button>
<button ng-hide="hide"> Button to Hide </button>

如果您在同一个 Controller 中拥有两个按钮,则无需将回调作为参数发送,只需调用该函数即可:

$scope.hide = false;

function Callback(result) {
    alert("result" + result);
    $scope.hide = result;
}

$scope.QRscanner = function() {
    cordova.plugins.barcodeScanner.scan(
        function(result) {
            if (result.cancelled != 1) {

                $scope.hide = false;
                $scope.scannedValue = result.text;
                Callback(false);
            } else {
                Callback(true);
                alert("Operation cancelled");

            }

        },
        function(error) {
            $scope.hide = true;
        }, {
            preferFrontCamera: true, // iOS and Android
            showFlipCameraButton: true, // iOS and Android
            showTorchButton: false, // iOS and Android
            torchOn: false, // Android, launch with the torch switched on (if available)
            prompt: "Place a barcode inside the scan area", // Android
            resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
            formats: "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
            orientation: "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
            disableAnimations: true // iOS
        }
    );
}

关于javascript - 使用回调更新 Ionic UI 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41483469/

相关文章:

angularjs - 配置字段中的颜色和 logColors 有什么区别

css - ionic 4 "ion-option"文字换行

javascript - 在 Ionic App 中以横向全屏播放视频

javascript - 对于 CodeMash 2012 的 'Wat' 演讲中提到的这些奇怪的 JavaScript 行为有何解释?

javascript - 需要通过 javascript API 在 R 内 Shiny 的 Tableau 图表的 Hello world 示例

javascript - 样式属性中的 Angular 表达式在 IE 中不起作用

javascript - AngularJS:RangeError:Date.toISOString (<anonymous>) 的无效时间值

cordova - ionic - 添加/删除 phonegap-push-plugin - CocoaPods 未找到

javascript - 将变量传递到 json 集合中

javascript - 运行多个递归 Promise 并在请求时中断