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>
方法6：完全拋棄Blade,完全前後端分離.
直接移除Blade，讓Angular來處理模塊和路由，達到前後端分離。Angular向Laravel請求JSON數據，處理後展示給用戶。
我比較傾向於前四種方法.
參考:
https://stackoverflow.com/questions/28548694/using-laravel-5-with-angularjs-blade-tag-conflict
https://laravel.com/docs/5.5/blade#blade-and-javascript-frameworks
https://github.com/laravel/framework/issues/17640