Die beste Methode, um Variablen von Symfony2 an den Angular-Bereich zu übergeben

Question

Ein gängiges Szenario, mit dem viele andere Entwickler konfrontiert sind - wir haben eine ausgereifte Anwendung basierend auf Symfony2/TWIG, und einige der html.twig-Vorlagen wurden zu sehr mit jQuery-Code und schwer zu pflegen. Was ist mit jQuery wegwerfen und Angular verwenden? Vorausgesetzt, ich habe ein Grundwissen über Winkelmodule, Controller, Dienste und Umfang und ein tiefes Wissen über Symfony2/TWIG, ist mein erstes Problem - was ist der beste Weg, um Variablen aus meinen vorhandenen Controller/Zweig-Vorlagen an Winkelsteuerungen zu übergeben ?

Ich möchte Scope nicht durch separaten JSON-Aufruf und einen separaten Controller in Symfony2 laden. Ich möchte nur die vorhandenen Variablen verwenden, die ich im Zweig habe.

Eine Möglichkeit, einige globale js Variablen zu tun ist, zu erklären:

<script> 
var window.someVar = {{ twig_object | json_encode() }}; 
</script> 

ein dann wie

<div ng-controller="myCtrl" ng-init="init()"> 
<div ng-model="someVar"> .... </div> 
</div> 

und Controller für

app.controller('myCtrl', ['$scope', function($scope) { 
$scope.init = function() { 
    if (window['someVar']) { 
     $scope['someVar'] = window['someVar']; 
    } 
}; 

Aber das scheint zu hässlich smth tun Ich (3 Schritte) Darf es zumindest vereinfacht oder anders gemacht werden?

Answer 1

Sie können Variablen direkt in ng-init erklären, so:

<div ng-controller="myCtrl" ng-init="myModel.someVar='{{ twig_object | json_encode() }}';"> 

Ich bin mehr an Razor in ASP.Net MVC, aber ich nehme an, das gleiche Prinzip, das hier mit Symfony2 gilt.

Denken Sie auch an die Doppelpunkt-Regel, Sie wollen nicht, dass der Wert direkt auf $ scope deklariert wird.

Answer 2

Nun, Ihre Möglichkeiten sind in diesem Fall begrenzt. Wenn Sie keinen zusätzlichen Aufruf tätigen möchten, müssen Sie Daten als globale Variable in die Seite einfügen (@JMK gibt einen nützlicheren Weg mit ngInit). Es kann eine einfache Variable sein, aber ich finde es bequemer, sie in Form eines Objekts zu schreiben und einen konstanten Dienst aus diesem globalen Wert zu setzen. Danach kann diese Konstante in der gesamten App verwendet werden.

<script> 
window.config = {{ twig_object | json_encode() }}; 
</script> 

Erstellen Sie dann eine Konstante (oder value):

app.constant('config', {data: window.config}); 

und in Controller

app.controller('myCtrl', ['$scope', 'config', function($scope, config) { 
    $scope.init = function() { 
     $scope.someVar = config.someVar; 
    }; 
}]); 

Answer 3

Eigentlich denke ich, das ist die einfachste Arbeitslösung:

<div ng-init='somevar = {{ somevar|raw|replace({"'":"\\'"}) }}'>