Najlepszy sposób przekazywania zmiennych z Symfony2 do zakresu Angular

Question

Jako typowy scenariusz, z którym boryka się wielu innych deweloperów - mamy dojrzałą aplikację opartą na Symfony2/TWIG, a niektóre szablony html.twig zostały zbyt mocno przeładowane kodem jQuery i trudne do utrzymania. Co powiesz na wyrzucenie jQuery i użycie Angular? Pod warunkiem, że posiadam podstawową wiedzę na temat modułów kątowych, kontrolerów, usług i zakresu oraz głębokiej znajomości Symfony2/TWIG, moim problemem jest - jaki jest najlepszy sposób przekazywania zmiennych z moich istniejących szablonów kontrolerów/gałązek do regulatorów kątowych ?

Nie chcę ładować zakresu przez osobne wywołanie JSON i osobny kontroler w Symfony2. Po prostu chcę użyć istniejących zmiennych, które mam w gałązce.

Jednym ze sposobów jest zadeklarować kilka globalnych js zmienne:

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

wtedy coś zrobić jak

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

i kontroler

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

Ale to wydaje się zbyt brzydki dla ja (3 kroki) Czy można to przynajmniej uprościć lub zrobić inaczej?

Answer 1

Można zadeklarować zmienne bezpośrednio w NG-init tak:

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

jestem bardziej przyzwyczajeni do Razor w ASP.NET MVC, ale zakładam, że ta sama zasada odnosi się tu z Symfony2.

Pamiętaj również o regule podwójnej kropki, nie chcesz, aby wartość była deklarowana bezpośrednio w $ scope.

Answer 2

Cóż, twoje opcje są w tym przypadku ograniczone. Jeśli nie chcesz wykonywać dodatkowych połączeń, będziesz musiał wprowadzić dane na stronę jako zmienną globalną (@JMK daje jeszcze jeden przydatny sposób z ngInit). Może to być prosta zmienna, ale wygodniej jest napisać ją w formie jakiegoś obiektu i ustawić stałą usługę z tej globalnej wartości. Następnie ta stała może być używana w całej aplikacji.

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

następnie utworzyć stały (lub value):

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

i kontroler

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

Answer 3

Właściwie myślę, że jest to najprostszy roztwór roboczy:

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