pass value from angularjs directive link function to templateurl

Question

I am trying to build a angular directive as shown below

<!DOCTYPE html>
<html lang="en"  ng-app="directiveModule">
<head>
    <meta charset="UTF-8">
    <title> Angular Json From</title>
</head>

<body>

<h3> Angular Json From</h3>

<div  ng-controller="mapController">

    <json-from json-config=jsonConfig></json-from>
</div>


</div>
<script>
    var app = angular.module("directiveModule", []);
    app.controller('mapController', [ '$scope', function($scope) {

        $scope.jsonConfig={

            "sensorName" : {
                "type" : "String",
                "description" : "Enter sensorName",
                "label":"Model Number",
                "required":true
            },
            "sensorDescription" : {
                "type" : "String",
                "description" : "Enter sensorDescription",
                "label":"Registration Number",
                "required":false
            },
            "latitude" : {
                "type" : "Number",
                "description" : "Enter latitude",
                "label":"latitude",
                "required":false
            },
            "longitude" : {
                "type" : "Number",
                "description" : "Enter longitude",
                "label":"longitude",
                "required":false
            }

        }



    }])

    app.directive('jsonFrom', function() {




        function link(scope, elem, attrs) {
            if(scope.jsonConfig){

                createForm(scope.jsonConfig)
            }
        }

        function createForm(jsonConfiguration) {
            var extractedData=[]

            var k = Object.keys(jsonConfiguration);
            k.forEach(function (objkey, index) {
                var obj = {
                    "name": splitCamelCase(objkey),
                    "realName": objkey,
                    "type": jsonConfiguration[k[index]].type,
                    "description": jsonConfiguration[k[index]].description,
                    "model": jsonConfiguration[k[index]].label
                };

                extractedData.push(obj);

            });
            console.log("&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&")
            console.log(extractedData)

        }

        function splitCamelCase (s) {
            return s.split(/(?=[A-Z])/).join(' ').split('_').join(' ').split('-').join(' ');
        };

        return {
            scope: {
                jsonConfig:'='
            },
            link: link,
            templateUrl: 'template.html',
            controller: "jsonFormCtrl",
        };

    })
</script>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="controller/fromController.js"></script>



</body>
</html>

in which i am able get the data(sample config : jsonConfig) from the view to directive but i am not sure how to push the data from directive to the the template in template URL

ie,in the sample how to get the value of extractedData which is a local variable inside a function to the template specified in template url

In which scope should i define the extractedData variable to get in the template

Suresh Rs · Answer 1 · 2016-11-04T10:42:53.250

First of all change the directive call in html from,

<json-from json-config=jsonConfig></json-from>

to

<json-from json-config={{jsonConfig}}></json-from>

to get $scope.jsonConfig available in directive.

Next, inside link function in the directive,

function link(scope, elem, attrs) {
        if(scope.jsonConfig){

            createForm(scope.jsonConfig)
        }
}

the passed attribute can be accessed by attrs.jsonConfig , assign it to a scope variable,

function link(scope, elem, attrs) {
  scope.canBeViewedInHtml = JSON.parse(attrs.jsonConfig);       
  if(scope.jsonConfig){
            createForm(scope.jsonConfig)
  }
}

And

<div>{{canBeViewedInHtml}}</div>

can be used inside templateUrl of the directive.

Thank you i don't want jsonConfig to be viewed in templateUrl rather a modified version of it which is extractedData is needed — dhana lakshmi, Nov 04 '16 at 11:05

pass value from angularjs directive link function to templateurl

1 Answers1