JQuery function converted to directive not working in angular

Question

I need to load html from json file. So I found dform the best solution for this. Since this is a jQuery plugin, and I need it in Angular. I was lucky to find the jsfiddle directive .

The only difference is that I had my own json file and I wrote the code separately. I am using a service to retrieve data from a json file via an HTTP request. After that, I use a directive similar to jsfiddle.

app.js

var app = angular.module('angularApp', []);

service.js

app.service('loaderService', ['$http', function ($http) {
    this.getLoadedHtml = function (callback)
    {
        return $http.get('../source/file.json')
           .then(function (res) {
               callback(res.data);
           });
    }
}])

controller.js

app.controller('mainCtrl', ['$scope', 'loaderService', function ($scope, loaderService) {
    loaderService.getLoadedHtml(function (data) {
        $scope.fields = data;
    });
}]);

directive.js

app.directive('dform', function () {
    return {
        scope: {
            action: '@',
            method: '@',
            html: '='
        },
        link: function (scope, elm, attrs) {
            var config = {
                "action": scope.action,
                "method": scope.method,
                "html": scope.html
            };
            elm.dform(config);
        }
    };
})

index.html

<div class="container-fluid" ng-app="angularApp">
        <div ng-controller="mainCtrl" style="background-color:green; margin-top:100px; height:1000px;">
            <div class="col-sm-3" id="source-area">
                <div action="index.html" method="get" html="fields" dform></div>
            </div>
        </div>
    </div>

file.json

[
  {
    "type": "p",
    "html": "You must login"
  },
  {
    "name": "username",
    "id": "txt-username",
    "caption": "Username",
    "type": "text",
    "placeholder": "E.g. [e-mail]"
  },
  {
    "name": "password",
    "caption": "Password",
    "type": "password"
  },
  {
    "type": "submit",
    "value": "Login"
  }
]

I also used the jquery and dform library.

. , $scope.fields . - html-? , jsfiddle.

Answer 1

. , , dform html ( ). , html dform :

...
link: function (scope, elm, attrs) {
    var config = {
        "action": scope.action,
        "method": scope.method,
        "html": scope.html
    };

    scope.$watch('html', function() {
        elm.dform(config);
    });

    elm.dform(config);
}
...

, ! , dform . , url . :

app.directive('dform', function () {
  return {
    scope: {
        action: '@',
        method: '@',
        url: '='
    },
    link: function (scope, elm, attrs) {
        var config = {
            "action": scope.action,
            "method": scope.method,
            "url": scope.url
        };
        scope.$watch('url', function() {
          elm.dform(config);
        });

        elm.dform(config);
    }
  };
})

loader. , , , - , .

UPDATE

, ( , ). , config.html html. , link :

link: function(scope, elm, attrs) {
  scope.$watch('html', function() {
    if (!scope.html)
      return;
    var config = {
      "action": scope.action,
      "method": scope.method,
      "html": scope.html
    };

    $(elm).dform(config);
  });
}

P.S. http- , .