When I change the value of an input clicking on a button $bindTo doesn't work firebase

Question

So I'm beginner to angularjs and firebase and I'm trying to develop an app which adds values(numerical) on an input. So far I have this:

app.js:

var app = angular.module("app", ['firebase']);

app.directive('addOne', function() { 
    return {
        link: function(scope,element) {
            element.bind('click', function() {
                console.log(element.parent().find('input'))
                element.parent().find('input')[1].value++;
            });
        }
    }
});

and my view:

<section class="form-group">
   <label for="">$</label> <input type="button" value="+" add-one>
   <input ng-model="user.level" type="text" class="form-control" />
</section>

and my controller:

app.controller('mController', ['$scope', 'User',
    function($scope, backHome, User, adicionar){

        $scope.user = User(1);
        User(1).$bindTo($scope, "user");

    }
]);

the thing is that after I click the button with the directive add-one the value of the input changes but the $bindTo is not working...

So why does the bindTo doesn't work when I make a change directly in the DOM?

Answer 1

Browsing around I could find a solution doing the way you said in the comments (two buttons one incrementing and another decrementing) thanks a lot for the help! and here's the final version.

app.directive('unaryInput', function(){
        return {
            restrict: 'EA',
            scope: {
                model: "="
            },
            template: '<input type="text" ng-model="model" /><button ng-click="decrement()">-</button><button ng-click="increment()">+</button>',
            link: function(scope, element) {
                scope.increment = function() {
                    scope.model++;
                }
                scope.decrement = function() {
                    scope.model--;
                }
            }
        };
    });

Answer 2

AngularJS doesn't care what the value of an input is set to, it only cares about what's in the ng-model. Try this...

app.directive('addOne', function() { 
    return {
        link: function(scope,element) {
            element.on('click', function() {
                scope.$apply(function(){
                    scope.user.level++
                });
            });
        }
    }
});

As pointed out by @PankajParkar, you also need to use scope.$apply when you want to update a binding from event.

angular.module('demo', [])
.controller('DemoController', function($scope){
  $scope.user={level: 1};
})
.directive('addOne', function() { 
  return {
    link: function(scope, element, attrs) {
      element.on('click', function() {
        scope.$apply(scope.user.level++);
      });
    }
  }
})
.directive('unaryInput', function(){
  return {
    restrict: 'EA',
    scope: {
      model: "=",
      txt: '@buttonText'
    },
    template: '<input type="text" ng-model="model" /><button>{{txt}}</button>',
    link: function(scope, element, attrs) {
        if(angular.isDefined(attrs.initialVal)) {
          scope.model = attrs.initialVal;
        }
      
        element.on('click', function() {
          if (attrs.direction === 'decrement') {
            scope.$apply(scope.model--);
          } else {
            scope.$apply(scope.model++);
          }
        });
      
      }
  };
});

<script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>

<div ng-app="demo" ng-controller="DemoController">
  <input type="text" ng-model="user.level">
  <input type="button" value="+" add-one>
  <hr>
  <unary-input button-text="Add one" model="user.level" direction="increment"></unary-input>
  <unary-input button-text="-" model="user.level" direction="decrement"></unary-input>
  <hr>
  <unary-input button-text="-" model="user.val" direction="decrement" initial-val="10"></unary-input>
</div>

In AngularJS, you want to change the view by changing the model that it's based on, versus doing it imperatively like you might with a traditional jQuery approach for example (traversing the DOM and incrementing the value).

UPDATE

Okay, so here's a nice reusable version of the (please check the snippet to see it in action).

The template includes both the button and the input. It accepts 4 values that you set as attributes:

1. button-text: The text you want to show on the button.
2. model: The model value for the input.
3. initial-val: The initial value for the input if you don't want to initialize on your controller.
4. direction: Whether to increment or decrement the values. This one currently accepts a string "decrement" to subtract. If you have no direction set or any other value set in the attribute, it will increment.

So, you would use it like this:

<unary-input button-text="Subtract One" model="user.val" direction="decrement" initial-val="10"></unary-input>

And the directive itself looks like this:

.directive('unaryInput', function(){
  return {
    restrict: 'EA',
    scope: {
      model: "=",
      txt: '@buttonText'
    },
    template: '<input type="text" ng-model="model" /><button>{{txt}}</button>',
    link: function(scope, element, attrs) {
        if(angular.isDefined(attrs.initialVal)) {
          scope.model = attrs.initialVal;
        }

        element.on('click', function() {
          if (attrs.direction === 'decrement') {
            scope.$apply(scope.model--);
          } else {
            scope.$apply(scope.model++);
          }
        });

      }
  };
});