Find solution
How to dynamically load directive in angularjs through json?

angularjs directive displays json during page load

  • I'm building my first AngularJS dynamic form, built based on information received from a JSON file using AngularJS directive. Everything works, my issue is that the JSON code is getting displayed while the page is loaded - once the page is loaded the JSON code disappears. Am I doing something wrong? Check http://plnkr.co/edit/v4jOwuF6jmZfORlNbvIB?p=preview to see the behavior, click on "Stop"/"Start" multiple times to see the behavior. HTML code: <!DOCTYPE html> <html ng-app="myApp"> <head> <script data-require="angular.js@*" data-semver="1.4.0-beta.2" src="https://code.angularjs.org/1.4.0-beta.2/angular.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-controller="ViewCtrl"> <div ng-repeat="page in form.form_pages"> <div ng-repeat="field in page.page_fields" class="form-group"> <field-directive field="field" ng-form="subForm"></field-directive> </div> </div> </body> js code: 'use strict'; angular.module('myApp',[]) .controller('ViewCtrl', ['$scope', function($scope) { var jsonStr='{"form_id":"1","form_name":"My Test Form","form_pages":{"1":{"page_id":1,"page_title":"My First Tab","page_hide":false,"page_fields":{"1":{"field_id":1,"field_title":"First Name","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"2":{"field_id":2,"field_title":"Last Name","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"3":{"field_id":3,"field_title":"Gender","field_type":"textfield","field_value":"0","field_required":true,"field_disabled":false},"4":{"field_id":4,"field_title":"Email Address","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"5":{"field_id":5,"field_title":"Password","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"6":{"field_id":6,"field_title":"Birth Date","field_type":"textfield","field_value":"1981-01-10T06:00:00.000Z","field_required":true,"field_disabled":false},"7":{"field_id":7,"field_title":"Your browser","field_type":"textfield","field_value":"2","field_required":false,"field_disabled":false},"8":{"field_id":8,"field_title":"Additional Comments","field_type":"textarea","field_value":"","field_required":true,"field_disabled":false},"9":{"field_id":9,"field_title":"I accept the terms and conditions.","field_type":"textfield","field_value":"0","field_required":true,"field_disabled":false}}}}}'; $scope.form = JSON.parse(jsonStr); }]) .directive('fieldDirective',function($http, $compile) { var linker = function(scope, element) { // GET template content from path var templateUrl = "textfield.html"; $http.get(templateUrl).success(function(data) { element.html(data); $compile(element.contents())(scope); }); } return { template: '<div>{{field}}</div>', restrict: 'E', scope: { field: '=' }, link: linker }; }) textfield.html - the html template: <div class="row" ng-form="subForm" ng-class="{'has-success': subForm[field.field_id].$invalid}"> <div class="col-sm-5">{{field.field_title}}:</div> <div class="col-sm-7"> <input type="text" placeholder="{{field.field_title}}" ng-model="field.field_value" value="{{field.field_value}}" ng-required="field.field_required" ng-disabled="field.field_disabled" class="form-control" id = "{{field.field_id}}" name = "{{field.field_id}}" > <div ng-show="subForm[field.field_id].$touched && subForm[field.field_id].$error && subForm[field.field_id].$invalid">Field '{{field.field_title}}' <span ng-show="subForm[field.field_id].$error.required"> is required.</span> </div> </div> </div> Thank you.

  • Answer:

    http://plnkr.co/edit/YC9p0UluhHyEgAjA4D8R?p=preview Basically instead of adding the loaded template into the element then compiling it in place I just compile the string then insert the compiled element directly element.append($compile(data)(scope)); Seems you can still see a delay but this might be the async loading of the template causing that, would need to debug in the network panel and do some profiling or logging to see exactly what's going on. Edit Made a fork of the plnkr to show one with the template inlined so there's no delay fetching it with $http http://plnkr.co/edit/Tnc3VOeI8cELDJDHYPTO?p=preview instead just grabbing it synchronously from the template cache and using ng-template in a script block to have it loaded in advance.

Sebastian Nagy at Stack Overflow Visit the source

Was this solution helpful to you?

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.