个人中心
gpt4 book ai didi

javascript - 温泉 - 对话框中的按钮不起作用

转载 作者：行者123 更新时间：2023-12-02 16:15:55 25 4
gpt4 key购买 nike

我正在使用 onsen ui 制作 Cordova 应用程序。我按照温泉网站的说明创建了一个对话框。

我在对话框中的按钮不起作用。

queSTListapp.js

var questlistmodule = angular.module('qntrquest', ['onsen']);

var collobraTem = null;

questlistmodule.controller('listCtrl', function($scope, $http){
$http.defaults.headers.post = {'Content-Type':'application/json'};

$scope.init = function(){
    var api_key = "Z******"

    var url = "http://**********";
    var id = 1;
    $http.post(url, {apikey: api_key.toString(), id: id.toString()}).
    success(function(data, status, headers, config){
        $scope.items = data;
    }).
    error(function(data, status, headers, config){
        alert("error: "+data);
    });
};

$scope.foo = function(id){
    //$scope.items[index]'ile verileri alıp diğer ekrana geçireceğimiz için index numarası bize gerekiyor.
    var index = $scope.findIndex(id);
    collobraTem = $scope.items[index];
    $scope.navi.pushPage('questdetail.html', {item: $scope.items[index]});
};

$scope.findIndex = function(aimId){
    var index = 0;
    var itemId = $scope.items[index].id;
    while(itemId != aimId){
        index++;
        itemId = $scope.items[index].id;
    }
    return index;
};

});



questlistmodule.controller('detailCtrl', function($scope, $http){
$scope.item = collobraTem;
$scope.dialogs = {};

/**
 * Camera veya galeri için hangisinin seçileceğine dair dialog
 */
$scope.showdialog = function(dlg){
    if (!$scope.dialogs[dlg]) {
        ons.createDialog(dlg).then(function(dialog) {
            $scope.dialogs[dlg] = dialog;
            dialog.show();
        });
    }
    else {
        $scope.dialogs[dlg].show();
    }

};

$scope.useCamera = function(){
    console.log("camera in use");
    navigator.camera.getPicture(function(){
        alert("done");
    }, function(message){
        console.log("failed because "+message);
    }, { quality: 50,
        destinationType: Camera.DestinationType.FILE_URI });
};

$scope.useGallery = function(){
    alert("gallery");
};
});

questlistmodule.controller('cameradialogCtrl', function($scope, $http){

$scope.useCamera = function(){
    console.log("camera in use");
    navigator.camera.getPicture(function(){
        alert("done");
    }, function(message){
        console.log("failed because "+message);
    }, { quality: 50,
        destinationType: Camera.DestinationType.FILE_URI });

};

$scope.useGallery = function(){
    alert("gallery");
};
});

listCtrl 没有问题，运行良好。

这是 questdetail.html

<!doctype html>
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css">

<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<style>
    .page--shop-details__content {
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px !important;
        bottom: 0px;
    }
    .card {
        background-color: white;
        background-image: url(item.logo);
        background-repeat: no-repeat;
        background-size: cover;
        color: white;
        height: 250px;
    }
    .card-toolbar ons-back-button span {
        color: white;
    }
    .card-name {
        font-weight: 600;
        font-size: 20px;
        padding: 66px 0 8px 0;
        text-align: center;
    }
    .card-desc {
        font-size: 14px;
        font-weight: 400;
        opacity: 0.9;
        text-align: center;
        line-height: 1.4;
    }
    .rating {
        text-align: center;
        position: relative;
        height: 0px;
    }
    .rating-num {
        position: relative;
        top: -24px;
        height: 24px;
        color: white;
        line-height: 24px;
        font-size: 12px;
        font-weight: 600;
        text-align: center;
        border-radius: 4px 4px 0 0;
        padding: 0 6px;
        background-color: #eb482f;
        color: white;
        width: auto;
        margin: 0 auto 0 auto;
        display: inline-block;
    }
    .rating-num ons-icon {
        font-size: 11px;
        vertical-align: -0px;
    }
    .action-col {
        text-align: center;
        opacity: 0.4;
        padding: 10px 0 8px;
    }
    .action-col:active {
        opacity: 0.7;
    }
    .action-col ons-button {
        padding: 0;
        line-height: 1;
    }
    .action-icon {
        padding: 0 0 4px 0;
    }
    .action-icon ons-icon {
        font-size: 28px;
    }
    .action-label {
        font-size: 12px;
    }
    .prop-desc {
        font-size: 14px;
        opacity: 0.7;
    }
    .prop-desc ons-icon {
        font-size: 14px;
        vertical-align: -0px;
        opacity: 0.5;
    }
</style>
</head>
<body>
  <ons-page modifier="shop-details" ng-controller='detailCtrl'>
      <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">{{item.name}}</div>
      </ons-toolbar>

    <div class="card" style="background-image:url({{item.logo}})">

      <div class="card-name">{{item.name}}</div>
      <div class="card-desc">{{item.description}}</div>

    </div>

    <div class="rating"><div class="rating-num">
        Ready?
    </div></div>

    <ons-list style="border-top: none"><ons-list-item style="line-height: 1; padding: 0;">
      <ons-row class="action">

        <ons-col class="action-col" ng-click="showdialog('cameradialog.html')">
          <div class="action-icon"><ons-icon icon="ion-arrow-up-a"></ons-icon></div>
          <div class="action-label">Qentured!</div>
        </ons-col>

        <ons-col class="action-col">
          <div class="action-icon"><ons-icon icon="ion-bookmark"></ons-icon></div>
          <div class="action-label">Add to Wishlist</div>
        </ons-col>

        <ons-col class="action-col">
          <div class="action-icon"><ons-icon icon="ion-share"></ons-icon></div>
          <div class="action-label">Share</div>
        </ons-col>
      </ons-row>
    </ons-list-item></ons-list>
  <ons-template id="cameradialog.html" ng-controller="cameradialogCtrl">
      <ons-dialog var="dialog" cancelable>
          <ons-list>
              <ons-list-item modifier="tappable">
                  <ons-button modifier="large--quiet" ng-click="useCamera()">Camera</ons-button>
              </ons-list-item>
              <ons-list-item modifier="tappable">
                  <ons-button modifier="large--quiet" ng-click="useGallery()">Gallery</ons-button>
              </ons-list-item>
          </ons-list>

      </ons-dialog>
  </ons-template>

  </ons-page>
  </body>
  </html>

我不确定是什么阻止了 ng-click 事件，或者它是否想在不同的范围、上下文或 Controller 中调用 useCamera() 函数，我不知道，问题出在哪里？你能帮我解决一下吗？

我只是想使用 useCamera() 函数。

最佳答案

我认为问题在于您尝试访问 useCamera() 和 useGallery() 方法，但它们不在对话框范围内。

在 Onsen UI 1.3.0 中，可以在创建对话框时传递范围，以便它可以访问方法和数据。您可以通过将 parentScope 参数传递给 ons.createDialog() 方法来完成此操作:

ons.createDialog('dialog.html', {parentScope: $scope});

我认为这会解决您的问题。

关于javascript - 温泉 - 对话框中的按钮不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29603812/

25 4 0
文章推荐： javascript - typeahead.js 远程不返回任何内容
文章推荐： javascript - 在javascript中检查字符串中是否只有标点符号
文章推荐： javascript - 当键为 'is.a.string' 时，如何在嵌套对象中获取/设置值？
文章推荐： javascript - 从 HTML DOM 中选择不同的标签集
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com