Not able to call AngularJS function?

Question

I am trying to call an AngularJS function written in demo.js whenever I click a menu button in HTML page abc.html. But it is not going inside the demo.js.

Below is the snippet of code:

****code from abc.html***********
<div id="all" ng-class="{hide:showmenu,slide:!showmenu}">
    <div class="overlay" ng-class="{show:showmenu}" ng-swipe-left="showmenu=false"></div>
        <div id="header">
            <button ng-click="toggleMenu()"></button>
            <h1>Demo</h1>
         </div>

And:

demo.js***************************

var app = angular.module('myApp', ['ngRoute','ngTouch']);
    app.directive('mySlideController', ['$swipe',
        function($swipe) {
            return {
            restrict: 'EA',
            link: function(scope, ele, attrs, ctrl) {
            var startX, pointX;
            $swipe.bind(ele, {
            'start': function(coords) {
            startX = coords.x;
            pointX = coords.y;
        },
        'move': function(coords) {
         var delta = coords.x - pointX;
        // ...
    },
    'end': function(coords) {
    // ...
    },
    'cancel': function(coords) {
    // ...
}
});
}
}
}]);

app.controller("AppController", function($scope){
     $scope.showmenu=false;
     $scope.toggleMenu = function(){
         $scope.showmenu=($scope.showmenu) ? false : true;
     }
});

How do you know you cant call the function? If you do a console.log or alert in the toggleMenu function, does it show? — Peter
– Peter, Commented Jun 17, 2015 at 5:52
Is your purpose to make this work, or to find out why it isn't working? Because you could use ng-click="showMenu=!showMenu" to toggle the value without calling a function. — Peter
– Peter, Commented Jun 17, 2015 at 6:01

ippi · Accepted Answer · 2015-06-17 06:16:18Z

The code works fine, so the problem is you not showing all of it. Missing ng-controller? Missing ng-app? Missing dependencies perhaps? How are we supposed to know when you can't be bothered showing it to us? We are not mind readers.

Working plunk: http://plnkr.co/edit/D3JADNfAOzvvkw8yRMk0?p=preview

<!DOCTYPE html>
<html>

  <head>
    <script src="https://code.angularjs.org/1.3.16/angular.js"></script>
    <script data-require="ngRoute@*" data-semver="1.3.15" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
    <script data-require="[email protected]" data-semver="1.3.16" src="https://code.angularjs.org/1.3.16/angular-touch.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="AppController" id="all" ng-class="{hide:showmenu,slide:!showmenu}">
      <div class="overlay" ng-class="{show:showmenu}" ng-swipe-left="showmenu=false"></div>
      <div id="header">
        <button ng-click="toggleMenu()">text</button>
        <h1>Demo</h1>
        <p>{{showmenu}}</p>
      </div>
    </div>
    <script>
      var app = angular.module('myApp', ['ngRoute', 'ngTouch']);
      app.directive('mySlideController', ['$swipe',
        function($swipe) {
          return {
            restrict: 'EA',
            link: function(scope, ele, attrs, ctrl) {
              var startX, pointX;
              $swipe.bind(ele, {
                'start': function(coords) {
                  startX = coords.x;
                  pointX = coords.y;
                },
                'move': function(coords) {
                  var delta = coords.x - pointX;
                  // ...
                },
                'end': function(coords) {
                  // ...
                },
                'cancel': function(coords) {
                  // ...
                }
              });
            }
          }
        }
      ]);

      app.controller("AppController", function($scope) {
        $scope.showmenu = false;
        $scope.toggleMenu = function() {
          console.log('showmenu', $scope.showmenu);
          $scope.showmenu = ($scope.showmenu) ? false : true;
        }
      });
    </script>
  </body>

</html>

Collectives™ on Stack Overflow

Not able to call AngularJS function?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related