让 Laravel 5 使用 Angular 的语法答案

【问题标题】：Getting Laravel 5 to work with Angular's Syntax让 Laravel 5 使用 Angular 的语法
【发布时间】：2015-03-22 11:17:12
【问题描述】：

我浏览了网络以了解如何让 Angular {{ variable }} 使用 Blade 的语法。

很少有网站说要对我的 Angular 执行此操作：@{{ var }}，但这不起作用。我正在尝试使用实时搜索字段。

在我的 page.blade.php 文件中：

<div ng-app>
<div ng-controller="MyController">
    <input type="search" ng-model="search" placeholder="Search...">
    <ul>
        <li ng-repeat="name in names | filter:search">
            @{{ name }}
        </li>
    </ul>
        <p>Tips: Try searching for <code>ann</code> or <code>lol</code></p>
</div>
</div>

<script>

function MyController($scope) {
$scope.names = [
'Lolita Dipietro',
'Annice Guernsey',
'Gerri Rall',
'Ginette Pinales',
'Lon Rondon',
'Jennine Marcos',
'Roxann Hooser',
'Brendon Loth',
'Ilda Bogdan',
'Jani Fan',
'Grace Soller',
'Everette Costantino',
'Andy Hume',
'Omar Davie',
'Jerrica Hillery',
'Charline Cogar',
'Melda Diorio',
'Rita Abbott',
'Setsuko Minger',
'Aretha Paige'];
}

</script>

我只显示搜索字段，但没有其他内容。我复制的链接在这里：http://jsfiddle.net/r26xm/1/

PS：我是 Angular 和 Laravel 的新手

【问题讨论】：

我假设没有显示名称？您使用的是哪个版本的角度？从 1.3 开始，不再支持使用全局函数作为控制器。您需要在模块中创建控制器。
@Cerad 我正在使用 1.3.15。该怎么做？
对两者都陌生是一种双重打击。为什么不从学习基础知识开始呢？使用 control-u 查看浏览器实际获取的内容。

标签： php angularjs laravel-5 blade

【解决方案1】：

只需在刀片标签的开头放置一个 @ 即可告诉刀片您希望标签刚刚通过。这是刀片的一部分，而不是 AngularJS。你使用的是什么版本的 Laravel？

@{{some info}}

会导致

{{some info}}

在你的最终表格上

【讨论】：

【解决方案2】：

你可以通过插值来改变angularjs显示变量的方式。

下面是一个例子：

<script>
  var customInterpolationApp = angular.module('customInterpolationApp', []);

  customInterpolationApp.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
  });


  customInterpolationApp.controller('DemoController', function() {
      this.label = "This binding is brought you by [[ ]] interpolation symbols.";
  });
</script>
<div ng-app="App" ng-controller="DemoController as demo">
    [[demo.label]]
</div>

这里是解释$interpolateProvider的angularjs页面

【讨论】：

你的方法试过了吗？你的确切答案对我不起作用。 “字符串”从未显示，只有“//demo.label//”
没有在 Laravel 中尝试过，但这应该可以肯定。这是一个工作示例：plnkr.co/edit/5FRuCXy0SXnIP1h5ZxE0?p=preview。您可以尝试使用 [[ 为 startSymbol 和 ]] 为 endSymbol 更改 //
是的，你是对的，使用 // 不起作用，但我刚刚在 laravel 中尝试使用 [[ 用于 startSymbol 和 ]] 用于 endSymbol 并且它按预期工作
我不推荐 //，因为在引擎盖下这一切都被转换成 Javascript，而且那些是 cmets。

【解决方案3】：

我认为问题在于 Angular 1.3 不再支持全局函数作为控制器。 http://wildermuth.com/2014/11/11/Angular_1_3_and_Breaking_Change_for_Controllers

所以找到一个更新的教程并使用类似的东西：

<script>
angular.module('myApp', [])
  .controller('MyController',['$scope',function($scope) 
  {
    $scope.names = ['Lolita Dipietro','Annice Guernsey'];
  }
]);
<div ng-app="myApp">

这不是 Laravel 特有的。你可以在没有任何后端的情况下运行这种东西。只需创建一个 index.html 文件并提供它。

【讨论】：

所有答案都可能有效，但它与 Laravel 的 Blade 冲突。
我不知道那是什么意思。