angularjs, Scope not updating across functions - with ngTouch

Question

I have a controller with such:

$scope.myVar = 0;

  $scope.back = function () {
    $scope.myVar--;
  };

  $scope.next = function () {
    $scope.myVar++;
  };

If next() (with ngClick) is called 3 times, we get:

//1

//2

//3

but if back() (with ngSwipeLeft) is called it returns

//-1

when I'm obviously expecting

//2

What am I missing here?

update: including ngTouch details - this seems to be the problem.. ngTouch is included.

When I watch the myVar value - its like it exists twice - one with the ngSwipeLeft call, and one with the ngClick call

no sure if this makes a difference, but next() is called from ngClick, whereas back() is called by ngSwipeLeft (from ngTouch) — Elliot, Oct 25 '14 at 05:09

Anuj Yadav · Answer 1 · 2014-10-25T07:06:35.023

Your snippet looks fine to me. You need to provide more code, error might be somewhere else. Look at the code below.

<!doctype html>
<html ng-app="myapp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-touch.min.js"></script>
    <script>
        var app = angular.module('myapp',['ngTouch']);
        var controller = app.controller('mycontroller', ['$scope',function($scope){
              $scope.myVar = 0;

              $scope.back = function () {
                $scope.myVar--;
              };

              $scope.next = function () {
                $scope.myVar++;
              };
        }]);
    </script>
  </head>
  <body ng-controller="mycontroller">
    <div>          
      <h1>MyVar: {{myVar}}!</h1>
      <input type="button" value="back" ng-click="back()"/>
      <input type="button" value="next" ng-click="next()"/>
    </div>
  </body>
</html>

Sorry I realized my problem was stemming from ngTouch - any ideas with that in consideration? — Elliot, Oct 25 '14 at 06:28
Tried with touch as well and this code should work. Please show your complete code. Edited the code as well. — Anuj Yadav, Oct 25 '14 at 07:05

score 1 · Accepted Answer · answered Oct 25 '14 at 19:52

Ok, so I've figured out my problem - I wasn't providing enough detail in the question - but if someone runs into something similar in the future, heres what was going on:

I was declaring my controller with ng-controller="myCtrl" in the templates, but also using routing, where I declared my controller like:

$routeProvider.when('/', {
templateUrl: 'myUrl.html',
controller: 'myCtrl'
});

This was instantiating the controller twice, and obviously causing problems (although that seemed to the only one to surface for now).

Removing the controller definition from the routing or the view did the trick.

+1 for details, it might help others in lot of different but similar scenarios. — Anuj Yadav, Oct 27 '14 at 01:10

dursun · Answer 3 · 2014-10-25T06:54:48.927

need to see your html not sure about your problem, here is a sample working code,

<div ng-app="myapp">
  <div ng-controller="IncDecController">
    <span>current value is {{myVar}}</span>
    <img src="https://angularjs.org/img/AngularJS-large.png" ng-swipe-left="back()"></img>
    <button ng-click="next()">next</button>
    </div>
</div>

script:

  angular.module('myapp', ['ngTouch'])
    .controller('IncDecController', ['$scope', function ($scope) {

    $scope.myVar = 0;

    $scope.back = function () {
        $scope.myVar--;
    };

    $scope.next = function () {
        $scope.myVar++;
    };
}])

can you get this to work using ngSwipeLeft to call back()? I couldn't in your example — Elliot, Oct 25 '14 at 06:27

angularjs, Scope not updating across functions - with ngTouch

3 Answers3