当我更改输入值时单击按钮 $bindTo 不起作用 firebase

Question

所以我是 angularjs 和 firebase 的初学者，我正在尝试开发一个在输入上添加值（数字）的应用程序。到目前为止我有这个：

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++;
            });
        }
    }
});

我的观点：

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

和我的控制器：

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

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

    }
]);

问题是，在我单击带有指令加一的按钮后，输入的值发生了变化，但 $bindTo 不起作用...

那么为什么当我直接在 DOM 中进行更改时 bindTo 不起作用？

Answer 1

AngularJS 不关心输入的值设置为什么，它只关心 ng-model 中的内容。试试这个...

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

正如@PankajParkar 所指出的，当您想要从事件更新绑定时，您还需要使用 scope.$apply。

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>

在 AngularJS 中，您想通过更改视图所基于的模型来更改视图，而不是像使用传统 jQuery 方法那样强制执行此操作（例如遍历 DOM 并增加值）。

更新

好的，这是一个很好的可重用版本（请检查代码片段以查看它的实际效果）。

模板包括按钮和输入。它接受您设置为属性的 4 个值：

button-text：要在按钮上显示的文本。
模型：输入的模型值。
initial-val：如果您不想在控制器上初始化，则为输入的初始值。
direction：是增加还是减少数值。这个目前接受一个字符串 "decrement" 来减去。如果您没有在属性中设置方向或任何其他值，它将递增。

所以，你会像这样使用它：

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

指令本身如下所示：

.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++);
          }
        });

      }
  };
});

Answer 2

四处浏览，我可以按照您在评论中所说的方式找到解决方案（两个按钮一个递增另一个递减）非常感谢您的帮助！这是最终版本。

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--;
                }
            }
        };
    });

当我更改输入值时单击按钮 $bindTo 不起作用 firebase

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

angularjs

firebase

angularfire