gpt4 book ai didi

angularjs - ion-nav-bar 中的元素无法点击,无法正常工作

转载 作者:行者123 更新时间:2023-12-02 03:29:44 25 4
gpt4 key购买 nike

我正在创建一个 ionic map 应用程序,并尝试向我的导航栏添加一个可切换的搜索栏。我通过 ion-nav-buttons side="left"(搜索图标、输入栏)添加到导航栏左侧的所有内容都无法单击/聚焦。奇怪的是,如果它们溢出导航栏,我可以点击这些元素的区域。下面的代码和测试图像:

<body ng-app="radar">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar bar-positive" ng-controller="MenuController" delegate-handle="navBar" align-title="center">
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<div class="searchBar">
<i class="icon ion-search placeholder-icon searchButton" ng-click="newSearch()"></i>
<div class="searchTxt" ng-show="showSearch">
<div class="bgdiv"></div>
<div class="bgtxt">
<input type="text" class="searchInput" placeholder="Search..." ng-model="search">
</div>
</div>
</div>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content ng-controller="MapController" class="mapCanvas has-header">
<ion-nav-view></ion-nav-view>
<div id="map" data-tap-disabled="true"></div>
<button id="GeoButton" ng-click="geoLocate()"><i class="icon ion-android-locate"></i></button>
</ion-content>
</ion-side-menu-content>

<!-- RIGHT SLIDE MENU -->
<ion-side-menu class="rightMenu" side="right">
<header class="bar bar-dark bar-header rightMenuHeader">
<h1 class="title">Right Menu</h1>
</header>
<ion-content class="has-header">
<ion-nav-view name="RIGHT MENU"></ion-nav-view>
<div class="button-bar logReg">
<a class="button" ng-click="">Login</a>
<a class="button" ng-click="">Register</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>

和一些 CSS:

.searchBar {
color: white;
margin: 0 !important;
padding: 0;
}

.searchBar .icon {
font-size: 27px;
line-height: 1.2;
position: fixed;
color: white;
padding-left: 6px;
padding-right: 6px;
}
.searchBar .searchTxt {
left: 55px;
width: 50%;
position: fixed;
height: calc(100% - 10px);
color: white;
}

.searchIcon {
position: fixed;
width: 50px;
height: 50px;
background-color: black;
}

.searchBar .searchTxt > .bgdiv {
background-color: darkBlue;
width: 50%;
height: 100%;
position: absolute;
opacity: 0.3;
}
.searchBar .searchTxt > .bgtxt {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
}
.searchBar .searchTxt input {
background-color: inherit;
color: white;
padding-left: 5px;
padding-right:5px;
}

.rightMenu {
background-color: rgb(50,50,50);
}

How it should look

Messy version showing situations in which I can interact with elements

最佳答案

根据您的代码,您的 www/js/controllers.js 文件中应该有一个名为“MenuController”的 Controller ,它具有函数 newSearch()。

这是我在我的 controllers.js 文件中使用 Controller “NavCtrl”和函数 .getPhoto() 捕获导航栏中的按钮单击的内容

.controller('NavCtrl', function($scope, $cordovaCamera) {
$scope.getPhoto = function() {
//alert("button clicked");
navigator.camera.getPicture(function(imageURI) {
}, function(err) {
console.err(err);
});
}

关于angularjs - ion-nav-bar 中的元素无法点击,无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27716061/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com