使用 Laravel 5 与 AngularJS 刀片标签冲突答案

【问题标题】：Using Laravel 5 with AngularJS blade tag conflict使用 Laravel 5 与 AngularJS 刀片标签冲突
【发布时间】：2015-04-17 09:25:47
【问题描述】：

我正在尝试使用 Laravel 5 设置 Angular。

我已经尝试在 appServiceProvider 中做：

public function boot()
{
    \Blade::setRawTags("[[", "]]");
    \Blade::setContentTags('<%', '%>'); // for variables and all things Blade
    \Blade::setEscapedContentTags('<%%', '%%>'); // for escaped data
}

与：

<div>
  <input type="text" ng-model="yourName" placeholder="Enter a name here">
  <h1>Hello, {{ yourName }}!</h1>
</div>

但我得到了：

Use of undefined constant yourName - assumed 'yourName'...

【问题讨论】：

如果你在控制器中调用\Blade::getTags()会得到什么？
@lukasgeiter 从上下文“Illuminate\Support\Facades\Facade”调用受保护方法 Illuminate\View\Compilers\BladeCompiler::getTags()
哎呀。试试\Blade::getContentTags()
@lukasgeiter 我得到 [""]
奇怪...这意味着设置标签确实有效。您是否尝试过清空视图缓存？（删除storage/framework/views中的所有视图编译视图）

标签： php angularjs laravel blade laravel-5

【解决方案1】：

Laravel >= 5.3

虽然在大括号前添加 @ 仍然有效，但 Laravel 还包含另一个方便的刀片实用程序，可让您按原样标记整个块：

@verbatim
<div>
    {{ ctl.variable1 }}
    {{ ctl.variable2 }}
</div>
@endverbatim

如果您对 Blade 模板渲染做的不多，则特别有用

【讨论】：

【解决方案2】：

最简单的方法是在 Angular 代码前使用 @：

 <div>
  <input type="text" ng-model="yourName" placeholder="Enter a name here">
  <h1>Hello, @{{ yourName }}!</h1>
</div>

source

【讨论】：

如果您使用的是 Laravel >= 5.3 Homestead，您需要禁用 Vue 以使 Angular 标签正常工作，并使用 @ 符号。启用 Vue 后，简单标签可以工作，但标签中没有可变分辨率或模型更新。

【解决方案3】：

否则你修改 Angular 语法...

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

【讨论】：

【解决方案4】：

在进行与 Blade 相关的更改（扩展 Blade、更改标签等）时，请务必删除缓存的视图。

它们位于storage/framework/views。

只需删除所有文件（.gitignore 除外）

如果你想要一些更实用的东西，你可以创建一个命令来做到这一点。赞this one

【讨论】：