【发布时间】：2015-05-28 13:42:08
【问题描述】：
我正在构建一个小型照片应用程序来学习 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)
我想在我的刀片模板（来自我的 Laravel 控制器的 showHome() 方法）中使用 $upload_url 值作为 photo.filename 的前缀。
<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中的上传URL。
所以...它可以工作，但我不知道这是否是 hacky ;)
任何意见将不胜感激！
【问题讨论】：
-
你是否已经管理了一个用于修改 Laravel 或 Angular 外推语法的替换？
-
嗨迭戈！感谢您的回复:) 我不确定我是否理解这个问题，Blade 和 Angular 外推语法是否会相互冲突？
-
它们肯定会发生冲突，您没有使用外推法吗？这是 Angular 的第一个示例……w3schools.com/angular/angular_examples.asp 看看 Angular 可以如何使用
{{和}}。 -
这个问题有不同的解决方法。我在回答中提供了一个:)
标签： javascript php angularjs laravel