AngularJS directive inside a ng-repeat loop with variable-based templateUrl

Question

Ok, I'm kinda new to the whole AngularJS thing and I'm probably getting my hands dirtier than I should, but here's what I'm trying to do:

loop through an array of fields (array of objects actually) for a customer entity
call a directive that chooses the template from a field property
data-bind the actual customer field to the ng-model inside the template
display the field

Here's what I have so far:

looping HTML

<div ng-repeat="info in customerCtrl.personalInfoFields">
    <edit-field info="info" model="customerCtrl.customer"></edit-field>
</div>

stripped down controller:

customerCtrl.personalInfoFields = [{'field':'NAME', 'type':'text'}, 
                                    {'field':'SURNAME', 'type':'text'}, 
                                    {'field':'MAIL', 'type':'email'}]
customerCtrl.customer = customersFactory.customerDetails; // filled through a Factory, works fine if I just draw every single field manually in the HTML

directive:

myApp.directive('editField', ['$http', '$compile', 'capitalizeFilter', function($http, $compile, $capitalizeFilter) {
return {
    scope: {
      info: "=",
      model: "="
    },
    replace: true,
    template: '<div ng-include="url"></div>',
    link: function(scope, element, attrs){
        scope.url = '/views/fields/edit'+$capitalizeFilter(scope.info.type)+'.html';
    }
    /*templateUrl: function(elem,attrs) 
    {
        if(typeof attrs.info.type === "undefined")
            return '/views/fields/editText.html';

        return '/views/fields/edit'+attrs.info.type+'.html'
    },*/
};
}]);

editText.html (the other files don't differ much right now, will do later)

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="form-group">
    <label class="control-label">{{'customers.'+info.field | i18n | capitalize}}</label>
    <input type="text" class="form-control" ng-model="model[info.field]"/>
</div>
</div>

Right now, inside the field I just get [object Object], if I pass the actual field itself as model instead of the whole customer object it displays fine but it isn't binded (I can change the field content but it won't reflect in the controller object) The commented templateUrl part doesn't work, since AngularJS only compiles the URL once for the whole ng-repeat function so I'm stuck with the undefined variable -> editText for everyone

How can I successfully bind the fields while still grabbing the right template for each field type?

Mdk · Accepted Answer · 2016-03-16 15:11:14Z

1

Problem solved, apparently calling

$compile(element.contents())(scope);

fixed the binding, but I still had to pass the whole customer object to the directive and then use

ng-model="model[info.field]"

to get the desired result

answered Mar 16, 2016 at 15:11

Mdk

5123 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

AngularJS directive inside a ng-repeat loop with variable-based templateUrl

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related