如何将Laravel变量传递到我的AngularJS视图中？
[英]How can I pass a Laravel variable into my AngularJS view?
问题描述
我正在构建一个小型照片应用程序来学习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/");
}
刀片模板
$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加上我的刀片模板的$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>
谢谢！ 任何可以让我走上正确道路的指针都值得赞赏:)
编辑：
我有它工作，但不知道这是否是最好的做法！
我已将此添加到我的刀片模板的底部：
<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的上传网址。
所以......它有效，但我不知道这是不是hacky;）
任何输入将不胜感激！
2 个解决方案
解决方案1
6 已采纳 2015-03-25 02:48:17
我想知道这是否是最好的做法。 但是， 如果值不需要是安全的 ，那么从服务器传递常量值的最简单方法之一就是这样。
在HTML中。
<script type="text/javascript">
var _config = {
key1: server_value1,
key2: server_value2
};
</script>
在角度模块运行方法中。
angular.module('yourapp', [])
.run(function($rootScope) {
$rootScope.config = _config;
});
在你的控制器中。
console.log($scope.config);
解决方案2
2 2015-03-25 02:51:38
您是否设法按顺序使用Angular和Blade语法？ 在我来说，我改变什么Laravel用来呼应变量和计算表达式这样的设置routes.php ：
Blade::setContentTags('[[', ']]'); // for variables and all things Blade
Blade::setEscapedContentTags(',.', '.,'); // for escaped data
我不确定一个好的做法是什么，但我不时用这种方式设置一些ng-init指令：
刀片模板
<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
如何将变量从View传递到Controller？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.