1

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

我正在考虑将一堆自定义内部代码迁移到 Angular，我必须让 Angular 与我们的 REST 模式一起工作，其中输入如下所示：

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

值成为input元素中显示的值，并且 min 和 max （当前）绑定到 min 和 max 属性。这些稍后被验证功能拾取。如果 value 超出 min-max 范围，则将其调整回该范围。

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

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

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

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

谁能提供我如何实现这种绑定的示例？到目前为止，我没有太多的运气让它工作。

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

4

1 回答 1

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文档。

于 2013-05-16T00:48:38.927 回答