How would I bind data to this directive in angularjs

Question

I have created a directive that will display alternative questions in an html template:

app.directive('altQuestion', ['$http', function($http) {
    'use strict';
    var directive = {
        restrict: 'E',
        transclude: true,
        scope: {
            json: '@',
            data: '='
        },
        template: function() {
            return  '<div ng-repeat="item in questionData" name="{{item.key}}" class="{{item.class}}"> '+
                        '<label class="labelHeading"> '+
                            '{{item.labelHeading}} '+
                        '</label> '+
                        '<span ng-repeat="q in item.questions"> '+
                            '<label>{{q.label}}</label> '+
                            '<input '+
                                'type="{{q.type}}" '+
                                'name="{{item.key}}" '+
                                //'ng-model="{{item.data}}" '+
                                'value="{{q.value}}" '+
                                'required'+
                            '/> '+
                        '</span> '+
                    '</div>';
        },
        link: link
    };
    return directive;
    function link(scope, elem, attr) {
        $http.get('/json/alt_questions.json').
        then(function(json) {

            scope.questionData = json.data;
            //console.log(scope.data);
            angular.forEach(scope.questionData, function (v, i) {
                angular.forEach(scope.data, function (k, index) {
                    if (v.key === index) {
                        console.log(v.data);
                    }
                });
            });
        });

    }
}]);

The data i need to bind is in

scope.data

and the question info in the json looks like this:

[{
    "key": "head_brain",
    "dependent": "",
    "data": "visit.data.head_brain",
    "class": "optionBox",
    "labelHeading": "Head/brain injuries or illnesses?",
    "questions": [{
        "label": "No",
        "value": "0",
        "type": "radio",
        "req": true,
        "dis": false
    }, {
        "label": "Yes",
        "value": "1",
        "type": "radio",
        "req": true,
        "dis": false
    }, {
        "label": "Not Sure",
        "value": "2",
        "type": "radio",
        "req": true,
        "dis": false
    }],
    "comments": "",
    "commentKey": ""
}, {
    "key": "seizures",
    "dependent": "",
    "data": "visit.data.seizures",
    "class": "optionBox",
    "labelHeading": "Seizures or Epilepsy?",
    "questions": [{
        "label": "No",
        "value": "0",
        "type": "radio",
        "req": true,
        "dis": false
    }, {
        "label": "Yes",
        "value": "1",
        "type": "radio",
        "req": true,
        "dis": false
    }, {
        "label": "Not Sure",
        "value": "2",
        "type": "radio",
        "req": true,
        "dis": false
    }],
    "comments": "",
    "commentKey": ""
}]

I need to bind the scope.data to ng-model on each question that is generated. Would I create an angular.each over the form? How could I do that in the isolated scope?

Here is a plunker: http://plnkr.co/edit/REOg53RgGUwb0OF3Fn1f

What needs to happen in the plunker is that the radio buttons need to be selected when it loads according to the data set in the main controller which is passed into the isolated scope.

kodu.cloud · Accepted Answer · 2016-10-24 15:24:54Z

2

There are two ways of doing this. With minor modifications: http://plnkr.co/edit/nSUb6WH5B9xD3fFnklc9?p=preview

'ng-model="$parent.$parent.$parent.visit.data[item.data]"

Three $parent is required here as you want to reach out of isolated scope. To do so you neeed to access $parent scope, but two ng-repeats created theis own scopes, so real parent scope of your directive will be $parent.$parent.$parent.

The better way is to avoid such direct usage and provide model as attribute like in 2nd example http://plnkr.co/edit/QDhpb9DgUMaUBdQVO79q?p=preview

scope.$parent.$watch(attr.model, function(newVal) {
  scope.model = newVal;
});

And then, use it as follows:

'ng-model="model[item.data]" '

answered Oct 24, 2016 at 15:24

kodu.cloud

1,6001 gold badge11 silver badges12 bronze badges

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

7 Comments

Erik Grosskurth Over a year ago

I had to go this route and hack the Dot Notation: plnkr.co/edit/REOg53RgGUwb0OF3Fn1f

Erik Grosskurth Over a year ago

I like your solution better but I cannot get it to work in my application

Erik Grosskurth Over a year ago

I can't figure out why yours isn't working in my app but works in the plunk

kodu.cloud Over a year ago

Do you get any error? It's better to use directive from 2nd approach, but it requires new attribule (see 2nd example), <alt-question model="visit.data" json="alt_HealthHistory.JSON" data="visit.data"></alt-question> - the model attribute.

Erik Grosskurth Over a year ago

I don't want to use the first solution but I have tried the 2nd and its not working. I am using an http request to get the questions data from a json file I think that may be the difference

|

Collectives™ on Stack Overflow

How would I bind data to this directive in angularjs

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related