Utilizing the Sidr mobile menu alongside AngularJS has been a breeze so far. However, I encountered an issue when trying to include a search bar within the mobile navigation - the button functionality seems to be affected. Interestingly, when I placed the button outside the mobile menu, it worked perfectly.
Here is the snippet of HTML:
<html data-ng-app="MyApp">
<body data-ng-controller="mainController">
<div id="mobile-menu">
<a id="responsive-menu">
<img src="img/icon_menu.png" alt="Mobile menu" />
</a>
</div>
<div id="mobile-nav">
<div class="input-group search-bar">
<input type="text" class="form-control" placeholder="Search for..." data-ng-model="keyword">
<span class="input-group-btn">
<button class="btn btn-search" type="button" data-ng-click="testClick()"><img src="img/icon_search.png" alt="Search" /></button>
</span>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#responsive-menu').sidr({
name: 'sidr',
source: '#mobile-nav',
renaming: false
});
$(window).touchwipe({
wipeLeft: function() {
// Close
$.sidr('close', 'sidr');
},
wipeRight: function() {
// Open
$.sidr('open', 'sidr');
},
preventDefaultEvents: false
});
});
</script>
</body>
</html>
For JavaScript (JS):
var app = angular.module('MyApp', ['ngRoute', 'slick', 'angularjs-dropdown-multiselect', 'infinite-scroll']);
app.controller('mainController', function ($scope){
$scope.testClick = function() {
console.log('click');
}
})
I'm still in the learning process with AngularJS, so there might be errors in how I'm calling the function or structuring the code. Any guidance would be greatly appreciated.
Thank you for your assistance!