Laravel Blade模板与AngularJS,vue,template.js冲突处理办法

Laravel的Blade模板引擎与Angular均使用“{{}}”标签来表示变量。
解决办法有几个:

方法1：修改Angular的标签

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

现在，Laravel使用{{variable}}，Angular使用<%variable%>，冲突解决。

方法2：修改Laravel模板标签 (适用于laravel version <5.3)

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

源文件位置:
D:\phpStudy\WWW\xxx\vendor\laravel\framework\src\Illuminate\View\Compilers\BladeCompiler.php

全局修改的话就加到route.php里面就可以了.但是我始终认为这个应该变成一个配置项.
现在，blade变量使用<%$variable%>，注释使用<%–$variable–%>，转义内容使用<%%$variable%%>。

3.在{{前面加个@符号,这样的话blade就不会解析,留给angular解析乐了

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

4.如果Laravel >= 5.3

如果大量的全是js代码,可以使用verbatim标签就可以了.

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

5.在blade页面引用一个非blade得php文件(不推荐)

<!-- index.blade.php -->
<!doctype html>
<html>
<head>
    <title>Fancy Laravel and Angular</title>

    <!-- load angular -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
</head>
<body>

    @include('angular-stuff'); <!-- app/views/angular-stuff.php -->

</body>
</html>