2016-11-04 2 views
0

Ich versuche, eine Winkel Richtlinie zu bauen, wie unterPass Wert von AngularJS Direktive Link Funktion templateurl

<!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 denen ich in der Lage, die Daten (Beispielconfig: jsonConfig) erhalten bin gezeigt aus der Sicht der EG-Richtlinie aber Ich bin mir nicht sicher, wie man die Daten von der Anweisung in die Vorlage in der Vorlage URL

push, dh wie der Wert von extrahierten Daten, die eine lokale Variable innerhalb einer Funktion ist, an die Vorlage in Vorlagen-URL

angegebenen erhalten

In welchem ​​Umfang sollte ich die extractedData Variable definieren, die in der Vorlage

Antwort

0

Zunächst einmal ändern, um die Richtlinie Anruf in html aus,

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

zu

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

zu bekommen $ scope.jsonConfig in Richtlinie zu erhalten .

nächste Funktion innerhalb Gliedes in der Richtlinie

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

      createForm(scope.jsonConfig) 
     } 
} 

das übergebene Attribut kann durch attrs.jsonConfig zugegriffen werden, es einen Umfang Variablen zuweisen,

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

Und

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

kann innerhalb TemplateUrl der Richtlinie verwendet werden.

+0

Vielen Dank, ich möchte nicht, dass JsonConfig in TemplateUrl angezeigt wird, sondern eine modifizierte Version davon, die extrahierteDaten benötigt werden –

Verwandte Themen