logo标签列表

如何将Laravel变量传递到我的AngularJS视图中？

javascriptphpangularjslaravel
5
我是一名有用的助手，可以为您翻译文本。
我正在构建一个小型的照片应用程序，以学习AngularJS 1.3。我来自PHP背景，因此从概念上讲，这对我而言是相当不同的 :)
我想将一个变量（我的照片文件夹的URL）传递到我的AngularJS视图（一个.html文件）中。我该如何做？
换句话说，从PHP传递应用程序常量到AngularJS ngRoute视图的最佳实践是什么？
以下是代码：

Laravel控制器方法

public function showHome()
{
    $upload_url = Config::get('app.url');
    return View::make('home')->with('upload_url', $upload_url."photos/");
}

Blade模板

$upload_url是我想在我的AngularJS视图(index.html)中使用的变量。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
        <title>Test Application</title>
    </head>
    <body ng-app="app" ng-controller="mainController">

        <div class="container">

            <p>The location of the photo files is:</p>
            <p>{{ $upload_url }}</p>

            <ng-view></ng-view>

        </div>

        {{ HTML::script('assets/js/jquery-2.1.1.min.js') }}
        {{ HTML::script('https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js') }}
        {{ HTML::script('http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js') }}
        {{ HTML::script('app/controllers/mainController.js') }}
        {{ HTML::script('app/services/photoService.js') }}
        {{ HTML::script('app/app.js') }}

    </body>
</html>

App.js

var constantsHelper = {};

var app = angular.module('app', ['ngRoute', 'mainController', 'photoService']);

app.config(function($routeProvider){
    $routeProvider.when("/",
        {
            templateUrl: "app/views/home.html",
            controller: "mainController"
        }
    );
});

主控制器（mainController.js）

angular.module('mainController', [])

.controller('mainController', function($scope, $http, Photo) {

    Photo.get()
        .success(function(data) {
            $scope.photos = data;
        });

});

照片服务（photoService.js）

angular.module('photoService', [])

.factory('Photo', function($http) {

    return {

        // Get all the photos
        get : function() {
            return $http.get('/api/photos');
        }

    }

});

...最后是我的Angular视图（home.html）

我想要在photo.filename前面加上来自我的Blade模板的$upload_url值（该值来自于我的Laravel控制器的showHome()方法）。

<div class="photo" ng-repeat="photo in photos">

   <div class='row'>
       <div class='col-md-10 col-md-offset-1'>
           <div class='loaded-image mb25'>
               <img src='{{ photo.filename }}'>
               <p>{{ photo.description }}</p>
           </div>
       </div>
   </div>

</div>

感谢您！任何可以让我走上正确道路的指针都会受到赞赏 :)
编辑：
我已经让它工作了，但不知道这是否是最佳实践！
我已将此添加到我的blade模板底部：
<script>
    constants = {};
    constants.upload_url = {{ $upload_url }}}";
</script>

已经修改了主控制器，使用$scope来传递常量。

angular.module('mainController', [])

.controller('mainController', function($scope, $http, Photo) {

    Photo.get()
        .success(function(data) {
            $scope.photos    = data;
            $scope.constants = constants;
            console.log(constants);
        });

});

那么我就可以简单地使用{{ constants.upload_url }}在index.html中访问上传URL。

所以……它能够工作，但我不知道这是否是hacky的；)

欢迎提供任何意见！

你是否已经成功地替换了修改Laravel或Angular的外推语法？ - diegoaguilar
嗨，迭戈！谢谢你的回复 :) 不过我不确定我理解问题了，Blade 和 Angular 的语法会相互冲突吗？ - Andrew
它们肯定可能会冲突，你没有使用过外推吗？这是Angular的第一个示例... http://www.w3schools.com/angular/angular_examples.asp看看Angular如何使用{{和}}。 - diegoaguilar
这个问题有不同的解决方法。我在我的回答中提供了其中一个 :) - diegoaguilar
2个回答
6

我不确定这是否是最佳实践。然而，如果不需要保证值的安全性，从服务器传递常量值的最简单方法之一是像这样。

在HTML中：

<script type="text/javascript">
    var _config = {
        key1: server_value1,
        key2: server_value2
    };
</script>

在Angular模块的运行方法中。
angular.module('yourapp', [])
    .run(function($rootScope) {
        $rootScope.config = _config;
    });

在你的控制器中。
console.log($scope.config);
2

你是否成功地将Angular和Blade语法整合？在我的情况下，我更改了Laravel用于输出变量和计算表达式的方式，设置在routes.php文件中：

Blade::setContentTags('[[', ']]');        // for variables and all things Blade
Blade::setEscapedContentTags(',.', '.,');   // for escaped data

我不确定什么是好的做法，但有时我会这样设置一些ng-init指令:

Blade模板

<div ng-controller="mainController" ng-init="constants={upload_url:'[[$upload_url]]'}">
  ...
</div>

视图

我通过以下方式获得渲染的视图：

<div ng-controller="mainController" ng-init="constants={upload_url:'some_url_string'}">
 ...
</div>

然后你可以从控制器中访问它，并以以下方式将其用于ng-Route：

$scope.constants.upload_url
1
你可以在获得任何意图控制器分配的地方完成这个操作，查看我的编辑。 - diegoaguilar
我相信你能做到这一点，同样，我建议你遵循这种模式来设置那些“通用和顶级不会改变的变量，以免后续请求”在你的顶级控制器中。 - diegoaguilar
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接