Question

我想通过

在角度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') 我的问题在哪里？怎么解决这个问题。谢谢。

Answer 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'
    }
});

Answer 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
    });

正如你注意到的那样，我创建了一个名为＆＃39; angular＆＃39;然后是另一个名为“组件”的组件，我们将有组件



    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中添加这些行< BR />



    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

最后执行命令＆＃39; gulp＆＃39;在终端（在我们的项目中），它应该在公共场所生成一个名为angular-templates的新文件夹。

那就是：）

Answer 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>

如何在templateURL中使用角度js的laravel局部视图

3 个答案: