StackoOverflow_21066789: angularjs-do-link-function-after-http-response-returned

Illustration of answer to http://stackoverflow.com/questions/21066789/angularjs-do-link-function-after-http-response-returned.

by epinapala

HTML

<script src="http://code.angularjs.org/1.2.7/angular.min.js"></script>
<div ng-controller="myCtrl">
    <input type="text" my-field="model.promise" />
</div>

JavaScript

/* Create mock-data for fake AJAX request */
var mockDelay = 3;   // seconds
var mockData = JSON.stringify({ fieldName: 'myField02' });
var mockPayload = 'json=' + encodeURIComponent(mockData) + '&' +
                  'delay=' + mockDelay;

/* Angular-specific code */
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($http, $scope) {
    $scope.model = {
        promise: $http.post('/echo/json/', mockPayload),
        myField01: 'Hello, world, from 01 !',
        myField02: 'Hello, world, from 02 !',
        myField03: 'Hello, world, form 03 !'
    };
});

app.directive ('myField', function ($compile) {
    return {
        scope: { promise: '=myField' },
        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);
            });
        }
    };
});