Cách tốt nhất để chuyển các biến từ Symfony2 sang góc Angular

Question

Như một kịch bản chung mà nhiều nhà phát triển khác gặp phải - chúng ta có một ứng dụng trưởng thành dựa trên Symfony2/TWIG và một số mẫu html.twig quá tải quá nhiều với mã jQuery và khó duy trì. Điều gì về việc ném đi jQuery, và sử dụng Angular? Được cung cấp một số kiến ​​thức cơ bản về mô-đun góc, bộ điều khiển, dịch vụ và phạm vi, và kiến ​​thức sâu về Symfony2/TWIG, vấn đề nắm tay của tôi là - cách tốt nhất để chuyển biến từ các bộ điều khiển/mẫu ghép hiện có của mình sang bộ điều khiển góc ?

Tôi không muốn tải phạm vi thông qua cuộc gọi JSON riêng biệt và bộ điều khiển riêng biệt trong Symfony2. Chỉ muốn sử dụng các biến hiện tại tôi có trong cành.

Một cách để làm là khai báo một số js biến toàn cục:

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

một sau đó làm smth như

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

và trong điều khiển

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

Nhưng điều này dường như quá xấu xí cho tôi (3 bước) Có thể đơn giản hóa ít nhất hoặc thực hiện theo cách khác không?

Answer 1

Bạn có thể khai báo các biến trực tiếp trong ng-init, vì vậy:

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

Tôi đã qua sử dụng hơn đối với Razor trong ASP.Net MVC nhưng tôi giả định các nguyên tắc tương tự áp dụng ở đây với Symfony2.

Cũng nhớ quy tắc chấm kép, bạn không muốn khai báo giá trị trực tiếp trên phạm vi $.

Answer 2

Tùy chọn của bạn bị giới hạn trong trường hợp này. Nếu bạn không muốn thực hiện cuộc gọi thêm thì bạn sẽ phải tiêm dữ liệu vào trang dưới dạng biến toàn cục (@JMK cung cấp một cách hữu ích hơn với ngInit). Nó có thể là biến đơn giản, nhưng tôi thấy thuận tiện hơn khi viết nó dưới dạng một số đối tượng và thiết lập một dịch vụ liên tục từ giá trị toàn cầu này. Sau đó, hằng số này có thể được sử dụng trong suốt ứng dụng.

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

Sau đó tạo một hằng số (hoặc value):

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

và trong điều khiển

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

Answer 3

Thật sự tôi nghĩ rằng đây là giải pháp làm việc đơn giản nhất:

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