如何在 Laravel Blade 中实现 AngularJS 应用程序答案

【问题标题】：How to implement AngularJS app in Laravel Blade如何在 Laravel Blade 中实现 AngularJS 应用程序
【发布时间】：2015-07-26 08:50:27
【问题描述】：

我需要在我的 Laravel Blade 视图中实现这个：https://github.com/pshevtsov/flashcards。我尝试安装 angular 并链接刀片文件中的所有文件。但它不起作用，因为 laravel 和 angular 在文件中使用 {{ }}。

【问题讨论】：

标签： angularjs laravel blade

【解决方案1】：

Laravel 5.3 版本引入了一个新命令来将块标记为“原样”，无需解析：

@verbatim
        Hello, {{ name }}.
@endverbatim

【讨论】：

【解决方案2】：

从https://www.trioangle.com/blog/how-to-use-angularjs-in-laravel-blade/复制粘贴

方法一：更改AngularJS标签

var sampleApp = angular.module(‘app’, [], function($interpolateProvider) {
  $interpolateProvider.startSymbol(‘<%’);
  $interpolateProvider.endSymbol(‘%>’);
});

现在 Laravel 将使用 {{ variableName }} 而 Angular 将使用。就像这样，你可以使用 Laravel Blade 和 Angular。您也可以将其更改为您想要的任何内容。

方法二：更改 Laravel 标签

Blade::setContentTags(‘<%’, ‘%>’); // for variables and all things Blade
Blade::setEscapedContentTags(‘<%%’, ‘%%>’); // for escaped data

变量将是：。注释将是：。转义数据将如下所示：。您也可以将其更改为您想要的任何内容。

方法3：不更改任何标签

@{{ variableName }}

现在 Laravel 将使用 {{ variableName }} 而 Angular 将使用 @{{ variableName }}。

Laravel Blade 中 AngularJS 的所有使用方法我都给你讲解过了，推荐你使用方法三。

【讨论】：

【解决方案3】：

在刀片模板中，我的代码如下：

<div ng-repeat="item in items" class="item" ng-cloak><?='{{item.name}}'?></div>

【讨论】：

【解决方案4】：

截至 2016 年 1 月，您只需这样做：

从 Angular 主页下载 app.js。
找到

function $InterpolateProvider() { var startSymbol = '{{'; var endSymbol = '}}';

把它们变成任何东西，我猜一个非官方的做法是 function $InterpolateProvider() { var startSymbol = '<%'; var endSymbol = '%>';

功劳应该归于 https://scotch.io/quick-tips/quick-tip-using-laravel-blade-with-angularjs

【讨论】：

【解决方案5】：

您可以设置自定义AngularJS花括号以防止与Blade模板引擎冲突：

var app = angular.module('app', []) 

  .config(function($interpolateProvider) {
    // To prevent the conflict of `{{` and `}}` symbols
    // between Blade template engine and AngularJS templating we need
    // to use different symbols for AngularJS.

    $interpolateProvider.startSymbol('<%=');
    $interpolateProvider.endSymbol('%>');
  });

我建议使用<%= %>，因为它是常用的结构，你可以在Underscore templates找到它。

之后 Angular 代码将如下所示：

<li ng-repeat="phone in phones">
    <p><%= phone.name %></p>
</li>

【讨论】：

【解决方案6】：

在 Laravel 5 中，你可以告诉 Blade 忽略花括号

@{{ $name }}

【讨论】：