如何在 templateURL 中通过 Angular js 使用 laravel 局部视图答案

【问题标题】：How can I use laravel partial view by angular js in templateURL如何在 templateURL 中通过 Angular js 使用 laravel 局部视图
【发布时间】：2015-04-14 06:58:47
【问题描述】：

我想通过 Angular JS 指令显示一个 laravel 刀片视图文件

var commentsApp = angular.module('CommentApp',[]);

commentsApp.directive('commentForm',function(){
    return {
        restrict: 'EA',
        replace: 'true'
        templateURL: 'views/comments/comment-form.blade.php'
    }
});

我想通过 angular 指令而不是 @include('comments.comment-form') 我的问题在哪里？如何解决这个问题。谢谢。

【问题讨论】：

给出 laravel 路线就这些了 :)

标签： angularjs laravel-5

【解决方案1】：

首先你必须在 laravel 中定义一个路由

Route::get('comment-form', function() {
    return view('comments.comment-form');
});

然后就可以在AngularJS中使用了

var commentsApp = angular.module('CommentApp', []);

commentsApp.directive('commentForm', function() {
    return {
        restrict: 'EA',
        replace: 'true',
        templateURL: 'comment-form'
    }
});

【讨论】：

您可以使用通配符作为路由来动态获取视图，最终只有一个路由来获取视图。
请问你是怎么做到的？

【解决方案2】：

上面的答案是个好主意，但是我不喜欢通过路由请求模板的想法，我们将为每个组件创建一个路由：c。我把我的解决方案留在这里：

在 elixir 函数内的 gulpfile.js 中添加以下行：



     var elixir = require('laravel-elixir');
        elixir(function(mix) {
            mix.copy('resources/assets/js/angular/components/**/*.template.html', public/angular-templates'); 
//Find all files with suffix .template.html
    });

如您所见，我创建了一个名为“angular”的文件夹，然后创建了另一个名为“components”的文件夹，我们将在其中创建我们的组件



    Angular----------------------------- 
    --Components------------------------ 
    ----my-component.directive.js------- 
    ----my-component.template.html------

我们必须通过执行以下操作创建一个全局角度变量，以获取我们的浏览器窗口原点（www.myapp.com、localhost:8000 等）：



    angular.module('myModule',[])
    .value('pathAssets', location.origin + '/angular-templates/')

在我们的 templateUrl 中，我们将通过以下方式调用模板：



    templateUrl: pathAssets + '../angular-templates/my-template.html',

我不得不说我们必须将我们的角度文件合并到一个文件中，否则它将无法工作 D：如果您不知道该怎么做，请将这些行添加到您的 gulpfile.js



    mix.scripts([
        '../../../bower_components/angular/angular.min.js',
        'angular/app.js',
        'angular/controllers/**/*.controller.js',
        'angular/components/**/*.directive.js',
        'angular/bootstrap.js',
], 'public/js/app.js'); //We concatenate angular files saving them in app.js

最后在终端中执行命令“gulp”（在我们的项目中），它应该会在 public 中生成一个名为 angular-templates 的新文件夹。

就是这样:)

【讨论】：

【解决方案3】：

(function(angular) {
  'use strict';
angular.module('app').component('bringTeamToEvent', {
  templateUrl: '/assets/ng/app/team/bringTeamToEvent.html',
  bindings: {
    hero: '='
  }
});
})(window.angular);

只需从公共目录工作，不需要编译资产和移动。

然后添加@符号告诉blade忽略并让angular在模板中完成它的工作

<span>Name: @{{ $ctrl.hero.name}}</span>

【讨论】：