jQuery function converted to directive not working in angular

Question

I need to load html from json file. So I found dform as best solution for that. Since it's the jQuery plugin and I need that in Angular. I am lucky that I found it's directive on jsfiddle.

The only difference is that I had my own json file and I have written the code separately. I am using service to get data from json file through http request. After that I am using the directive similar to the jsfiddle one.

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. user@example.com"
  },
  {
    "name": "password",
    "caption": "Password",
    "type": "password"
  },
  {
    "type": "submit",
    "value": "Login"
  }
]

I have used jquery and dform library too.

Since I have not got any error. My array is coming fine into controller and $scope.fields is also working fine in controller. By I cannot see any html rendered? I have used the same as in jsfiddle.

Answer 1

Elaborating on my comment. So what I think happens is dform does not reload automatically when the html changes (just not expecting it to change). What you could do in your directive is watch on html and update dform on change:

...
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);
}
...

But wait, there is more! As I mentioned, dform also supports loading external forms from server. According to documentation, that should be possible by using url subscriber. So your directive would look something like this:

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);
    }
  };
})

This eliminates the need in loader service. Now, I haven't tried this, so it maybe will require some tweaking from your side, by the idea should be clear by now.

UPDATE:

Ok, I've done a demo (which you should do next time you ask the question). The big problem was that the config.html needed to be reassigned after change in html property. So our link function now looks like this:

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. I have replaced http call with timeout, but that makes absolutely no difference.