Angular Js : access data in directive and create form control

Question

I have a array with form questions which has label(_text), type(QuestionData._fieldType). on basis of fieldtype I want to creata directive. Here I am stuck how to pass parameters to directives and use inside directive.

html

<div ng-controller="autoQuoteCtrl">
                        <form class="form-horizontal text-center" role="form" name="DTOstep1" ng-submit="onSubmit()">
                           current page:{{$state.current.name}}
                            <div ng-repeat="que in questions[$state.current.name]">
                               <div ng-if="que.QuestionData._fieldType === 'text'" >
                                    text - <code>{{que.QuestionData._attributeName}}</code>
                                    <text-control-dir data="que"></text-control-dir>
                                  <!--  <question-dir>print from directive</question-dir> -->
                                </div>  
                                <div ng-if="que.QuestionData._fieldType === 'select'" >
                                    select - <code>{{que.QuestionData._attributeName}}</code>
                                  <select-control-dir data="que"></select-control-dir>
                                </div>
                                <div ng-if="que.QuestionData._fieldType === 'radio'" >
                                    select - <code>{{que.QuestionData._attributeName}}</code>
                                    <radio-control-dir data="que"></radio-control-dir>
                                  <!--  <question-dir>print from directive</question-dir> -->
                                </div>
                                <div ng-if="que.QuestionData._fieldType === 'hidden' && que.QuestionData._attributeName != 'CBQ'" >
                                    hidden - <code>{{que.QuestionData._attributeName}}</code>
                                    <hidden-control-dir data="que"></hidden-control-dir>
                                  <!--  <question-dir>print from directive</question-dir> -->
                                </div>
                            </div>                  

                            <input type='hidden' id="save_quote_email" name="save_quote_email" ng-model="AutoQuote.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails[0].EmailAddress" value="praveend06@gmail.com" />
                            {{AutoQuote.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails[0].EmailAddress}}
                            <input type="submit" value="Save" />
                            {{AutoQuote.postAutoQuoteObj.SessionInfo.StateCode}}
                        </form>
                    </div>

controlDirective.js

(function () {
    "use strict";

    angular
            .module("autoQuote")
            .directive('textControlDir', [textControlDir])
            .directive('selectControlDir', [selectControlDir])
            .directive('radioControlDir', [radioControlDir])
            .directive('hiddenControlDir', [hiddenControlDir]);

    function textControlDir(data)
    {
        console.log('here in text directive');
        console.log(data);
        return {
            transclude: true, // append html
            restrict: 'E',
            template: "<div ng-transclude></div>\n\
\n\
<label>{{data._text}} </label><input type='text' name='' id='' value='' >"
        };
    }

    function selectControlDir()
    {
        console.log('here in select directive');
        return {
            transclude: true,
            template: "<h1>Made by a select directive!</h1>"
        };
    }

    function radioControlDir()
    {
        console.log('here in radio directive');
        return {
            transclude: true,
            template: "<h1>Made by a radio directive!</h1>"
        };
    }

    function hiddenControlDir()
    {
        console.log('here in hidden directive');
        return {
            transclude: true,
            template: "<h1>Made by a hidden directive!</h1>"
        };
    }

}());

please check my plunker link for complete code. http://plnkr.co/edit/Op1QDwUBECAosPUC7r3N?p=preview

Answer 1

when you want to define the template of your directive, instead of template itself you can use a function of the form:

     angular.module("autoQuote")
     .directive('question', function() {
     return {
       template: function(elem, attrs) {
         if (angular.isDefined(attrs["type"])) {
           switch attrs["type"]:
             case "text":
                 return "<input type='text' name='' id='' value='' >"
           case "radio":
             // return radio template
         }
       }
       ....
     }
   });

and you can write a general directive like question and use it like this: <question type="{{que.QuestionData._fieldType}}"></question> .

Also you can check this answer for more information. Hope it helps