As a common scenario that many other developers face - we have a mature application based on Symfony2 / TWIG, and some of the html.twig templates got too much overloaded with jQuery code and hard to maintain. What about throwing away jQuery, and use Angular ? Provided I have some basic knowledge about angular modules, controllers, services and scope, and a deep knowledge of Symfony2/TWIG, my fist problem is - what is the best way to pass variables from my existing controllers/twig templates to angular controllers?
作为许多其他开发人员面临的常见场景 - 我们有一个基于Symfony2 / TWIG的成熟应用程序,并且一些html.twig模板因jQuery代码过载而难以维护。如何丢弃jQuery,并使用Angular?如果我有一些关于角度模块,控制器,服务和范围的基本知识,以及对Symfony2 / TWIG的深入了解,我的第一个问题是 - 将变量从现有的控制器/树枝模板传递到角度控制器的最佳方法是什么?
I don't want to load scope through separate JSON call and a separate controller in Symfony2. Just want to use existing variables I have in twig.
我不想通过单独的JSON调用和Symfony2中的单独控制器来加载作用域。只想使用我在twig中的现有变量。
One way to do is declare some global js variables:
一种方法是声明一些全局js变量:
<script>
var window.someVar = {{ twig_object | json_encode() }};
</script>
an then do smth like
那么做就像
<div ng-controller="myCtrl" ng-init="init()">
<div ng-model="someVar"> .... </div>
</div>
and in controller
并在控制器中
app.controller('myCtrl', ['$scope', function($scope) {
$scope.init = function () {
if (window['someVar']) {
$scope['someVar'] = window['someVar'];
}
};
But this seems too ugly for me (3 steps) May it be simplified at least or done another way?
但这对我来说似乎太难看了(3个步骤)可能至少是简化还是做了另一种方式?
3 个解决方案
#1
7
You can declare variables directly in ng-init, so:
您可以直接在ng-init中声明变量,因此:
<div ng-controller="myCtrl" ng-init="myModel.someVar='{{ twig_object | json_encode() }}';">
I'm more used to Razor in ASP.Net MVC but I assume the same principle applies here with Symfony2.
我更习惯ASP.Net MVC中的Razor,但我认为同样的原则适用于Symfony2。
Also remember the double dot rule, you don't want value's declared directly on $scope.
还记得双点规则,你不希望在$ scope上直接声明值。
#2
4
Well your options are limited in this case. If you don't want to make extra call then you will have to inject data into page as global variable (@JMK gives one more useful way with ngInit). It can be simple variable, but I find it more convenient to write it in form of some object and set a constant service from this global value. After that this constant can be used throughout the app.
那么你的选择在这种情况下是有限的。如果您不想进行额外调用,则必须将数据作为全局变量注入页面(@JMK为ngInit提供了一种更有用的方法)。它可以是简单的变量,但我发现以某个对象的形式编写它并从这个全局值设置一个常量服务更方便。之后,这个常量可以在整个应用程序中使用。
<script>
window.config = {{ twig_object | json_encode() }};
</script>
Then create a constant (or value):
然后创建一个常量(或值):
app.constant('config', {data: window.config});
and in controller
并在控制器中
app.controller('myCtrl', ['$scope', 'config', function($scope, config) {
$scope.init = function () {
$scope.someVar = config.someVar;
};
}]);
#3
2
Actually I think this is the easiest working solution:
实际上我认为这是最简单的工作解决方案:
<div ng-init='somevar = {{ somevar|raw|replace({"'":"\\'"}) }}'>
#1
7
You can declare variables directly in ng-init, so:
您可以直接在ng-init中声明变量,因此:
<div ng-controller="myCtrl" ng-init="myModel.someVar='{{ twig_object | json_encode() }}';">
I'm more used to Razor in ASP.Net MVC but I assume the same principle applies here with Symfony2.
我更习惯ASP.Net MVC中的Razor,但我认为同样的原则适用于Symfony2。
Also remember the double dot rule, you don't want value's declared directly on $scope.
还记得双点规则,你不希望在$ scope上直接声明值。
#2
4
Well your options are limited in this case. If you don't want to make extra call then you will have to inject data into page as global variable (@JMK gives one more useful way with ngInit). It can be simple variable, but I find it more convenient to write it in form of some object and set a constant service from this global value. After that this constant can be used throughout the app.
那么你的选择在这种情况下是有限的。如果您不想进行额外调用,则必须将数据作为全局变量注入页面(@JMK为ngInit提供了一种更有用的方法)。它可以是简单的变量,但我发现以某个对象的形式编写它并从这个全局值设置一个常量服务更方便。之后,这个常量可以在整个应用程序中使用。
<script>
window.config = {{ twig_object | json_encode() }};
</script>
Then create a constant (or value):
然后创建一个常量(或值):
app.constant('config', {data: window.config});
and in controller
并在控制器中
app.controller('myCtrl', ['$scope', 'config', function($scope, config) {
$scope.init = function () {
$scope.someVar = config.someVar;
};
}]);
#3
2
Actually I think this is the easiest working solution:
实际上我认为这是最简单的工作解决方案:
<div ng-init='somevar = {{ somevar|raw|replace({"'":"\\'"}) }}'>