我有一个 Laravel 应用程序,我想将其添加到 Angular 前端中。
我的索引文件 main.blade.php 指定应用程序的名称。这是我的主页的结构...其中 html 部分通过 {{ $content }} 输入:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
...
</head>
<body>
<div id="main-container">
<header>
...
</header>
{{ $content }}
<footer>
...
</footer>
</div>
</body>
</html>
我还有另一个部分页面,私有(private)事件:
<div id="inner-container" class="events" ng-controller="myCtrl">
<li ng-repeat="phone in phones">
<p>{{phone.name}}</p>
</li>
...
</div>
然后是一个controllers.js 文件:
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.'},
{'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.'},
{'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.'}
];
});
我遇到了未处理的异常:渲染 View 时出错:[content.private-events]。使用未定义的常量电话 - 假定为“电话”
鉴于我的文件结构,我不能像这样链接到 Angular 应用程序中吗?我是否必须将 Controller 名称添加到标签中,或者我可以使用任何 DOM 元素容器吗?
谢谢
最佳答案
您需要更改 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>
关于javascript - 在 Laravel PHP 中集成 Angular 应用程序 - 未处理的异常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29945757/