Sidr with angularjs button ng-click not working

Question

I'm using Sidr mobile menu with Angularjs. I'm putting a search bar inside the mobile nav and the button works fine. The problem is when I'm combining the it with Angularjs, somehow the ng-click didn't return any response.

I tried putting the button outside the mobile menu and it works fine.

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>

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 new with AngularJS so maybe there's something wrong with how I call the function or how I structure the code. Any help is appreciated.

Thank you very much

Claies Claies · Accepted Answer · 2015-02-07T02:55:24

Your controller is not importing $scope.

Try:

.controller('mainController', function ($scope){

That being said, I'm an advocate of never using $scope, as it has many side effects, and breaking bad habits later is harder than training yourself good practices from the start. Angular has a syntax referred to by 'Controller as', which allows you to treat your controller as a standard JavaScript object.

.controller('mainController', function (){
var vm = this;
vm.testClick = function() {
    console.log('click');
}

in the HTML:

<body data-ng-controller="mainController as vm">
....
<button class="btn btn-search" type="button" 
      data-ng-click="vm.testClick()">....

it is now very clear where this function resides, and you aren't reliant upon $scope as a "catch-all" for your variables.

Sidr with angularjs button ng-click not working

1 Answers