温泉 - 对话框中的按钮不起作用
Onsen - Buttons in dialog not working
我正在制作一个带温泉的 cordova 应用程序 ui。正如温泉网站所说，我创建了一个对话框。
我在对话框中的按钮不起作用。
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 事件，或者它想在我不知道的不同范围、上下文或控制器中调用 useCamera() 函数，问题出在哪里？你能帮我解决一下吗？
我只是想使用 useCamera() 函数。
我认为问题在于您正在尝试访问 useCamera() 和 useGallery() 方法，但它们不在对话范围内。
在 Onsen UI 1.3.0 中，可以在创建对话框时传递范围，以便它可以访问方法和数据。您可以通过将 parentScope 参数传递给 ons.createDialog() 方法来实现：
ons.createDialog('dialog.html', {parentScope: $scope});
我想这会解决你的问题。
我正在制作一个带温泉的 cordova 应用程序 ui。正如温泉网站所说，我创建了一个对话框。
我在对话框中的按钮不起作用。
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 事件，或者它想在我不知道的不同范围、上下文或控制器中调用 useCamera() 函数，问题出在哪里？你能帮我解决一下吗？
我只是想使用 useCamera() 函数。
我认为问题在于您正在尝试访问 useCamera() 和 useGallery() 方法，但它们不在对话范围内。
在 Onsen UI 1.3.0 中，可以在创建对话框时传递范围，以便它可以访问方法和数据。您可以通过将 parentScope 参数传递给 ons.createDialog() 方法来实现：
ons.createDialog('dialog.html', {parentScope: $scope});
我想这会解决你的问题。