Xung đột AngularJS-Twig với niềng răng xoăn đôi

Như bạn đã biết, cả hai góc và cành đều có cấu trúc điều khiển chung - niềng răng xoăn đôi. Làm cách nào để thay đổi giá trị mặc định của Angular?

Tôi biết rằng tôi có thể làm điều đó trong Twig, nhưng trong một số dự án tôi không thể, chỉ có JS.

Bạn có thể thay đổi thẻ nội suy bắt đầu và kết thúc bằng cách sử dụng interpolateProvider dịch vụ. Một nơi thuận tiện cho việc này là tại thời điểm khởi tạo mô-đun.

angular.module('myApp', []).config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});

https://docs.angularjs.org/api/ng/provider/$interpolateProvider

Câu hỏi này xuất hiện đã được trả lời, nhưng một giải pháp thanh lịch hơn chưa được đề cập là chỉ đơn giản là đính kèm các dấu ngoặc nhọn trong dấu ngoặc kép giữa các dấu ngoặc nhọn, như vậy:

{{ '{{myModelName}}' }}

Nếu bạn đang sử dụng một biến cho nội dung, hãy làm điều này thay vào đó:

{{ '{{' ~ yourvariable ~ '}}' }}

Bạn nên sử dụng dấu ngoặc đơn , không phải dấu ngoặc kép. Dấu ngoặc kép cho phép nội suy chuỗi bằng Twig, do đó bạn phải cẩn thận hơn với nội dung, đặc biệt nếu bạn đang sử dụng biểu thức.

Nếu bạn vẫn ghét nhìn thấy tất cả các dấu ngoặc nhọn, bạn cũng có thể tạo một macro đơn giản để tự động hóa quy trình:

{% macro curly(contents) %}
   {{ '{{' ~ contents ~ '}}' }}
{% endmacro %}

Lưu nó dưới dạng tệp và nhập nó vào mẫu của bạn. Tôi đang sử dụng ngcho tên vì nó ngắn và ngọt ngào.

{% import "forms.html" as ng %}

Hoặc bạn có thể đặt macro ở đầu mẫu và nhập dưới dạng _elf (xem tại đây) :

{% import _self as ng %}

Sau đó sử dụng nó như sau:

{{ ng.curly('myModelName') }}

Kết quả này:

{{myModelName}}

... Và theo dõi cho những người sử dụng Mt Haml cùng với Twig. Mt Haml cho phép sử dụng các curlies AngularJS theo cách thông thường bởi vì bất kỳ mã Twig nào cũng được truy cập - và = thay vì {{}}. Ví dụ:

Đồng bằng HTML + AngularJS:

<tr ng-repeat="product in products">
   <td> {{ product.name }} </td>
</tr>

Mt Haml + AngularJS:

%tr(ng-repeat="product in products")
   %td {{ product.name }}

Mt Haml + AngularJS với Twig theo phong cách Mtoutl:

- set twigVariable = "somevalue"
= twigVariable
%tr(ng-repeat="product in products")
   %td {{ product.name }}

Như đã đề cập trong câu hỏi tương tự về Django và AngularJS, mẹo thay đổi các ký hiệu mặc định (trong Twig hoặc AngularJS) có thể cung cấp sự không tương thích với phần mềm của bên thứ ba, sẽ sử dụng các ký hiệu này. Vì vậy, lời khuyên tốt nhất tôi tìm thấy trong google: https://groups.google.com/d/msg/symfony2/kyebufz4M00/8VhF1KWsSAEJ

TwigBundle không cung cấp cấu hình cho các dấu phân cách lexer vì việc thay đổi chúng sẽ cấm bạn sử dụng bất kỳ mẫu nào được cung cấp bởi các gói được chia sẻ (bao gồm các mẫu ngoại lệ do chính TwigBundle cung cấp).

Tuy nhiên, bạn có thể sử dụng thẻ thô xung quanh các mẫu góc cạnh của mình để tránh sự đau đớn khi thoát khỏi tất cả các dấu ngoặc nhọn: http://twig.sensiolabs.org/doc/tags/raw.html - Barshe | Thân hình

Tag đã được đổi tên thành nguyên văn

Bạn cũng có thể sử dụng chỉ thị dựa trên thuộc tính <p ng-bind="yourText"></p>giống như<p>{{yourText}}</p>

Bạn có thể sử dụng \{{product.name}}để có được biểu thức bị bỏ qua bởi Tay cầm và thay vào đó được sử dụng bởi Angular.

Đây là phiên bản được biên dịch của các câu trả lời hay nhất và là ví dụ cho các khối nguyên văn:

Đối với các lần chèn đơn, sử dụng:

{{ '{{model}}' }}

hoặc nếu bạn sử dụng biến twig

{{ '{{' ~ twigVariableWitModelName ~ '}}' }}

Nguyên văn , rất thanh lịch và dễ đọc đối với một số biến số góc:

<table ng-table>
    {% verbatim %}
        <tr ng-repeat="user in $data">
        <td data-title="'Name'">{{user.name}}</td>
        <td data-title="'Age'">{{user.age}}</td>
        </tr>
    {% endverbatim %}
</table>

Nếu bạn không quan tâm đến việc thay đổi các thẻ mẫu của cú pháp góc hiện tại sẽ yêu cầu một số cách viết lại khó hiểu của các mẫu góc hiện tại của bạn.

Người ta chỉ có thể sử dụng các thẻ mẫu twig với các thẻ góc như vậy:

{% verbatim %}{{yourName}}{% endverbatim %}

Tìm thấy điều này trên một câu trả lời chủ đề tương tự khác : Angularjs trên ứng dụng symfony2

Ngoài ra, bạn có thể thay đổi các ký tự được sử dụng bởi Twig. Điều này được kiểm soát bởi Twig_Lexer .

$twig = new Twig_Environment();

$lexer = new Twig_Lexer($twig, array(
    'tag_comment'   => array('[#', '#]'),
    'tag_block'     => array('[%', '%]'),
    'tag_variable'  => array('[[', ']]'),
    'interpolation' => array('#[', ']'),
));
$twig->setLexer($lexer);

Theo bài đăng này, bạn sẽ có thể làm điều đó như thế này:

angular.module('app', [])
  .config(['$interpolateProvider', function ($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
  }]);

Tôi thích @pabloRN, nhưng tôi thích sử dụng span thay vì p, vì đối với tôi p sẽ thêm dòng vào kết quả.

Tôi sẽ sử dụng điều này:

<span ng-bind="yourName"></span>

Tôi cũng sử dụng aText với con trỏ bên trong trích dẫn kép để tôi không phải viết lại nhiều lần.

Bạn có thể tạo một hàm trong twig để bao quanh các chỉ thị góc của mình, vì vậy, thay vì đi ...

{{"angular"}}

anh đi ...

{{angular_parser("angular stuff here output curlies around it")}}