Question

我是AngularJS的新手，如果这是一个菜鸟问题，请原谅我。文档非常简洁，所以我可能错过了一些明显的东西！

我正在考虑将一堆自定义内部代码迁移到Angular，我必须使用我们的REST模式使用Angular，其输入如下：

foo: {
   value: 100,
   min: 50,
   max: 150
}

值变为input元素中显示的值，min和max（当前）绑定到min和max属性。这些后来被验证功能选中。如果值超出最小 - 最大范围，则将其调整回该范围。

无论如何，我正在尝试做类似的事情：

<input type="text" ng-model="foo" my-bind />

...并使用名为ngModel的指令覆盖myBind以管理关系，以便读取值并将其写入foo.value。

我稍后会使用自定义验证器来处理最小/最大属性。

任何人都可以举例说明我如何实现这样的约束吗？到目前为止，我没有太多运气使它成功。

......或许我的整个方法都很愚蠢？我必须使用上面的数据结构，但我不能在不久的将来改变它。

Answer 1

我不完全确定我理解这个问题，但似乎你可以这样做：

<input type="number" ng-model="foo.value" max="foo.max" min="foo.min" />

如果您仍然需要自定义指令，您可以执行以下操作来操作ngModel：

angular.module('customControl', []).
  directive('contenteditable', function() {
    return {
      restrict: 'A', // only activate on element attribute
      require: '?ngModel', // get a hold of NgModelController
      link: function(scope, element, attrs, ngModel) {
        if(!ngModel) return; // do nothing if no ng-model

        // Specify how UI should be updated
        ngModel.$render = function() {
          element.html(ngModel.$viewValue || '');
        };

        // Listen for change events to enable binding
        element.bind('blur keyup change', function() {
          scope.$apply(read);
        });
        read(); // initialize

        // Write data to the model
        function read() {
          ngModel.$setViewValue(element.html());
        }
      }
    };
  });

来自AngularJS文档。

使用AngularJS ngModel绑定多个HTML属性

1 个答案: