javascript - 在 Laravel PHP 中集成 Angular 应用程序 - 未处理的异常

标签 javascript angularjs laravel

我有一个 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/

相关文章:

php - 使用 Laravel JWT 自定义负载

php - 随机运行时异常 : The only supported ciphers are AES-128-CBC and AES-256-CBC with the correct key length

php - Laravel 6 : A facade root has not been set

javascript - 使用 parse.com 将新数据添加到源时刷新 ng-repeat 行

javascript - 在 iOS 中从 iframe 重定向父页面

javascript - md-dialog 中的 Angular-Material md-select

javascript - 在 Developer Console 中获取 AngularJS 的对象和变量列表

javascript - AngularJs单元测试 'this'

javascript - 通过动态属性从对象数组创建对象

javascript - 如何将从 API 获取的数组分配给 Vue.js 中的 data 属性?