AngularJS做链接功能后$ HTTP响应返回 [英] AngularJS do link function after $http response returned

问题描述

我需要在一个指令的HTTP响应返回之后执行链接功能。我们的想法是这样的：

I need to perform a link function in a directive after an http response returns. The idea is something like this:

<input type="text" my-field>
<script>
 angular.module("mine")
 .controller ('myCtrl', function ($scope) {
  $http.get("/my/service").success(function (data, status, headers, config) {
    // OK, done with the query... now I know my field name to bind to. Somehow
    // I have to get it down to the link function below...
  });
 })
 .directive ('myField', function ($compile) {
  return {
    link: function (scope, element, attrs) {
      var my_field = attrs.myField;
      element.removeAttr('my-field');

      // Somehow figure out the field here in ngFieldSpec
      element.attr('ng-model', ngFieldSpec);
      $compile(element)(scope);
    };
   });
</script>

在这里，我需要输入字段绑定到响应的元素，但我不知道是什么元素会被调用，直到我得到的回应。但是，当我运行它，$ HTTP得到执行之前，该指令的链接上运行：实际序列

Here, I need to bind the input field to an element of the response, but I don't know what the element will be called until I get the response. But when I run it, the directive's link runs before $http gets done: the actual sequence is

• $ http.get启动


• 指令的链接功能运行


• $ http.get返回成功

我有点熟悉$ Q，但我不知道如何将用来做需要做的事情。顺便说一句，我只示出一个输入字段调用MyField的指令，但也有可能其中许多在页面上，并且它们都需要相同的信息。

I'm somewhat familiar with $q, but am not sure how that would be used to do what needs to be done. BTW, I have shown only one input field invoking the myField directive, but there are potentially many of them on the page, and they all need the same information.

编辑，以响应于请求增加更多的信息：

Edited to add more information in response to request:

我有一个返回JSON数据结构的服务。我不提前知道数据结构中的实际模样，但我可以计算出来，并与我的网页的输入字段匹配的字段的。我试图在链接功能来做到这一点匹配起来。我很高兴去做别的地方;我能做到这一点在$ http.success功能，但是这将是在控制器做的DOM操作;我的理解是，DOM操作只应在一项指令来完成。

I have a service that returns a JSON data structure. I do not know in advance exactly what that data structure will look like, but I can figure it out and match the fields up with my page's input fields. I'm attempting to do this matching up in the link function. I'm glad to do it somewhere else; I could do it in the $http.success function, but that would be doing DOM manipulation in a controller; and my understanding is that DOM manipulation should only be done in a directive.

下面就是我的HTML需要如下：

Here's what my HTML needs to look like:

<input type="text" my-field="[MY_EXTENSION_NAME]myFieldName">
<input type="text" my-field="[MY_EXTENSION_NAME]myFieldName2">
<input type="text" my-field="[MY_EXTENSION_NAME_2]myFieldName">

来自服务器的响应将是这样的：

The response from the server will be something like:

{
    realField1: "Diddly",
    realField2: "Squat",
    extensions: [
      {
        name: "MY_EXTENSION_NAME",
        fields: [
          { name="myFieldName" value="Foo" },
          { name="myFieldName2" value="Bar" }
        ]
      },
      {
        name: "MY_EXTENSION_NAME_2",
        fields: [
          { name="myFieldName" value="Baz" },
          { name="myFieldName2" value="Buz" }
        ]
      }
    ]
 }

服务器的响应可能会有所不同，因为：

The server's response may vary because:

• 可以有任意数量的扩展（MY_EXTENSION_NAME，等等。）


• 的扩展可能以任何顺序返回


• 可以有任意数量的字段


• 的字段可以以任何顺序被返回

在这里，整个问题是，我想转换[MY_EXTENSION_NAME] myFieldName到NG-模式model.extensions [0]点域[0] .value的。不过，我现在正在考虑将数据转化成规范读期间的形式会更容易，所以NG-模型可以只是model.my_extension_name.myFieldName。

The whole problem here is I want to convert "[MY_EXTENSION_NAME]myFieldName" into the ng-model "model.extensions[0].fields[0].value. However, I am now thinking transforming the data into a canonical form during reading will be easier, so ng-model can just be "model.my_extension_name.myFieldName".

推荐答案

目前尚不清楚你想要达到（我pretty肯定会有一些更好的方法）什么，而是你可以做到这一点像这样的：

It is not clear what you are trying to achieve (I'm pretty sure there will be some better way), but you could do it like this:

1 结果
在你的范围定义承诺：

1.
Define a promise in your scope:

app.controller('myCtrl', function ($http, $scope) {
    $scope.model = {
        promise: $http.get('/my/service'),
        myField01: 'Hello, world, from 01 !',
        myField02: 'Hello, world, from 02 !',
        myField03: 'Hello, world, form 03 !'
    };
});

2 结果
从你的HTML，引用，为了将它传递给你的指令承诺：

2.
From your HTML, reference that promise in order to pass it to your directive:

<input type="text" my-field="model.promise" />

3。结果
得到这个承诺到指令的范围隔离：

3.
Get this promise into your directive's isolate scope:

app.directive ('myField', function ($compile) {
    return {
        scope: { promise: '=myField' },
        ...

4。结果
在你的链接功能，注册时的承诺得到解决回调（也就是你到你的请求的响应），并做一切必要的操作：

4.
In your link function, register a callback for when the promise gets resolved (i.e. you get a response to your request) and do all necessary manipulation:

...
link: function (scope, elem, attrs) {
    scope.promise.success(function (data) {
        elem.removeAttr('my-field');
        elem.attr('ng-model', 'model.' + data.fieldName);
        $compile(elem)(scope.$parent);
    });
}

---

又见这个 短演示

---

See, also, this short demo.

这篇关于AngularJS做链接功能后$ HTTP响应返回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！