2015-02-13 13 views
6

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 ?Najlepszy sposób przekazywania zmiennych z Symfony2 do zakresu Angular

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?

+0

My własne doświadczenie jest takie, że będziesz consta ntly walczą z AngularJS. Dla mnie łatwiej było dodać parametr _format = json do moich tras, a następnie po prostu zwrócić json z kontrolera. Utrzymaj AngularJS szczęśliwego i gałązka z obrazu. Poza tym nie będziesz musiał zajmować się całym problemem nawiasów klamrowych. – Cerad

+0

@Cerad Jestem bardzo ciekawy problemu z nawiasami klamrowymi. W MVC (którego używam) wprowadzamy zmienne po stronie serwera z symbolem at * @ *, ale używamy tutaj tej samej strony klienckiej składni (do interpolacji), co po stronie serwera (dla zmiennych przekazywanych z serwera)! Czy od czasu do czasu nie pojawiają się problemy, czy też jest to w porządku, ponieważ serwer najpierw widzi kod? – JMK

+0

@JMK - Nie rozumiem twojego pytania. Unikam krętego problemu, zachowując szablony twig i angularjs w osobnych plikach. Angularjs są podawane bezpośrednio bez przechodzenia przez S2. – Cerad

Odpowiedz

7

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.

+0

czy mógłbyś wyjaśnić ostatnie fraze? Dlaczego nie mogę napisać ng-init = "someVar = '{{twig_object | json_encode()}}';" i zainicjuje $ scope.someVar z twig_object? Oznacza zasadę podwójnej kropki. –

+0

Zasada jest w porządku, ale kod nie zadziałałby, zobacz moją odpowiedź poniżej dla poprawnego kodu, aby to zadziałało –

4

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; 
    }; 
}]); 
+0

czy możliwe jest zainicjowanie $ scope.someVar bez wywoływania ng-init, jak może w konstruktorze kontrolera? –

+0

Tak, jest to możliwe, ale nadal musisz w jakiś sposób zapisać te dane do kontrolera. Jeśli twoja aplikacja znajduje się w osobnym pliku js, musisz ponownie napisać ją do HTML jako zmienną globalną lub jako ng-init na jakimś elemencie. – dfsq

+0

jasne, dzięki. Nauczyłem się o stałych :) –

2

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

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

Ten kod wprowadza lukę XSS za pośrednictwem zmiennej somevar. –

Powiązane problemy