0

我已经实现了一个远程验证指令，一旦输入模糊，它就会查询指定的 JSON API 端点。它期待响应{ valid: true|false }。

我现在必须扩展它以允许它发送涉及来自父范围的多个值的请求。

我的标签定义如下所示：

<input remote-validate endpoint="/api/action/:value" ng-model="MyInput" />

其中 :value 被替换为 $scope.MyInput 的 urlencoded 值。这运作良好。

我需要的是这样的端点/api/action/:value/:person/:thing， :person 和 :thing 替换绑定到父范围值。我最初的想法是拥有一个bindings将父范围映射到端点的属性。

<input remote-validate endpoint="/api/action/:value/:person/:thing" bindings="{person: 'firstName', thing: 'thingName'}" ng-model="MyInput" />
(...)
<input ng-model="firstName" />    <input ng-model="thingName" />

给定var bindings = scope.$eval(attrs.bindings);是否有任何方法可以遍历bindings对象并创建与父范围的双向绑定？

编辑：一种解决方法可能是这样做：

<input validate-remotely 
    endpoint="api/action/:value/:param1/:param2" 
    param1="person" 
    param2="thing" />

这显然意味着我只能使用我在范围定义中指定的参数数量。这对我来说是一个很好的工作。很高兴知道是否有办法在编译/链接时动态创建这些绑定。

我可以提供一个小提琴，但我现在没有时间，所以我希望有人能对这是否可能/如何可能有一个好主意。

4

2 回答 2

0

正如我昨天了解到的，您可以$parse在“绑定”属性上使用。 看到这个帖子。$watch对于来自父级或子级的更改，这是一个属性的好方法

例子：

<div parse-test bindings="{person: 'firstName', thing: 'thingName'}"></div>

// in your directive link function:
scope.bindings = $parse(attrs.bindings)(scope);
  scope.$watch('bindings', function(val){
    for (i in scope.bindings){
      scope[i] = scope.bindings[i];
    }  
  }, true);

试试这个笨拙的

于 2013-07-11T13:53:20.413 回答
0

这就是我以不太理想的方式解决它的方法。

看到这个 plunker，它有一个我使用的指令的副本，在我的应用程序中运行良好，但在 Plunker 中不起作用（我希望随机选择的plunkerapi 端点被调用并失败，但由于一些奇怪的原因没有调用它我不想调试的错误）。

我在这个问题的 EDIT 中提出的解决方法遇到的问题是，您似乎不能在同scope一个. 如果有人可以详细说明是否是这种情况以及原因，我会很高兴。requiredirective

解决方法

我使用一个params属性来指定对象表示法中的附加数据，以扩展以转到资源请求。我在 params 属性中使用了句柄语法来动态更改对象表示法字符串。

<input ng-model="value2" ... />
<input validate-remotely 
       endpoint="/api/:value/?thing=:anotherValue" 
       params="{ anotherValue: '{{ value2 }}' }"  ... />

不太好：/但它有效。

然后在blur经过验证的输入中，我重新 $eval 对象字符串（plunker 中的 app.js:40）并扩展资源数据以包含该对象，该对象使用ngResources冒号 (:) 表示法替换 URL。

验证有 3 个状态：

remoteValidityPending: 字段验证失败，因为它仍在检查中 - 适合显示微调器。

remoteValidityUnchecked：该字段已更改，因为它已被检查但尚未模糊 - 确保任何 `ng-disable="form.$invalid"' 提交按钮保持禁用状态，直到我们知道后端已返回响应。

remoteValidity：如果通过，则字段端点已被调用，并且“{valid: true}”已从服务器返回。

我几乎可以肯定有更好/不同的方法来解决这个问题，如果有人改进了这个指令，我很乐意改变答案。我希望这可以帮助那里的人。

于 2013-07-19T08:25:37.753 回答