Angular parse JSON into directive

Question

Basically I am using angular routing for my pages and its respective template. Every pages has form in which it has more HTML fields(input/select/textarea). I am trying to create reusable Directive to create html field like below

app.directive('field',function(){
        return {
            restrict : "E",
            scope : {

            },
            link : function(scope,elem,attr){
                var content;
                scope.Options = {
                    id: scope.$id+'_'+elem.attr('id'),
                    label : elem.attr('label'),
                    placeholder : elem.attr("placeholder"),

                };
                scope.contentUrl = 'templates/fields/'+elem.attr('template')+'.html';           
            },
            template: '<div ng-include="contentUrl"></div>'
        }
    })

Now from my respective page HTML, I will use this directive. For example from customer page HTML has,

<field id="NAME" template="text" label="First Name" placeholder="Enter First Name"></field>

So far so good. Field is generated as expected. Now I wanted to prepopulate the customer JSON data into directive respective fields.

I tried to create factory service to get JSON data and inject this service to my customer controller like below

Factory service

app.factory('dataService', function($http) {
       return {
            getCustomerData: function() {
                 //return the promise directly.
                 return $http.get('offline/customer.json')
                           .then(function(result) {
                                //resolve the promise as the data
                                return result.data;
                            });
            }
       }
    });

customerController

app.controller('customerController', ['$scope', 'dataService',function($scope,dataService) {
        dataService.getCustomerData();//need to parse this data into field directive
    }]);

Am I doing right way? How do we parse respective page data into their page fields created by directive?

azaviruha · Accepted Answer · 2015-06-17 10:18:12Z

1

First of all, I think, you need to bind fetched data with controller's scope:

app.controller('customerController', ['$scope', 'dataService',function($scope,dataService) {
        dataService.getCustomerData().then(function ( data ) {
            $scope.data = data; // let data == { someField: 42 }
        };
    }]);

And after that, you need to use data from scope into angular's template:

<field id="NAME" template="text" label="First Name" placeholder="Enter First Name">{{someField}}</field>

answered Jun 17, 2015 at 10:18

azaviruha

8971 gold badge7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pierre Maoui · Accepted Answer · 2015-06-17 12:28:36Z

To prepopulate your fields, you need to use Angular binding i.e ngModel. Using ng-include in your directive is redundant, you can use directly the template attribute in your directive.

I would do it that way :

app.directive('customtext',function() {
  return {
    restrict:'E',
    require:'ngModel',
    scope:{
      thevalue:'='
    },
    template:'<input type="text" ng-model="thevalue"/>',
  }
});

and use :

<customtext thevalue="name" />

And now you can populate the controller's scope and the bind will be done this way :

app.controller('customerController', ['$scope','dataService',function($scope,dataService) {
        var data = dataService.getCustomerData();
        $scope.name = data.name;
}]);

You will need to create a directive for each field you want to create.

ps: the JSON that get through $http is automatically converted as an object. You don't need to use JSON.parse.

Collectives™ on Stack Overflow

Angular parse JSON into directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related