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

    }
]);

事情是，在我点击带有指令add-one的按钮后，输入的值发生了变化，但$ 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所指出的那样，当你想要从事件更新绑定时，你还需要使用范围。$ apply。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

<强>更新

好的，所以这里有一个不错的可重用版本（请查看代码段以查看其实际效果）。

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

按钮文字：您要在按钮上显示的文字。
model：输入的模型值。
initial-val：如果您不想在控制器上初始化，则输入的初始值。
方向：是否递增或递减值。这个当前接受一个字符串＆＃34;减少＆＃34;减去。如果您没有设置方向或在属性中设置任何其他值，它将递增。

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

<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

2 个答案: