【发布时间】：2015-05-07 00:42:44
【问题描述】：
我正在尝试将 Angular JS 与 Laravel 4.2 一起使用。我已将刀片的默认 {{}} 更改为 [[]]，它运行良好，现在的问题是当我将 Angular JS 代码放在主布局（视图）中时它可以工作，但是当我将 Angular JS 代码放在一个孩子中时视图（实际上子视图扩展了主布局，部分是使用 @section('contents') ...Angular JS 代码... @stop）它根本不起作用，浏览器无法呈现 Angular JS 表达式并在代码编辑器中显示它！这是我的“main layout.blade.php”和“child.blade.php”：
“main.layout.blade.php”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Customer Management</title>
<!-- Bootstrap -->
[[ HTML::style('css/bootstrap.min.css') ]]
[[ HTML::style('css/custom.css') ]]
[[--angular js files--]]
[[HTML::script('/js/angular/angular.min.js')]]
[[HTML::script('/js/controllers.js')]]
[[--jquery bootsrtap js files--]]
[[ HTML::script('js/respond.js') ]]
[[ HTML::script('js/jquery-1.11.2.min.js') ]]
[[ HTML::script('js/bootstrap.min.js') ]]
</head>
<body>
@include('layouts.main-menu')
<div class="container" id="container">
<div ng-app=""><!-- This Angular JS works fine -->
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
@yield('content')
</div>
@include('layouts.footer')
<script>
$("nav ul li").on("click", function() {
$("nav ul li").removeClass("active");
$(this).addClass("active");
});
</script>
</body>
</html>
Child.blade.php
@extends('layouts.main')
<!doctype html ng-app="myApp">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
@section('content')
<div ng-app=""><!-- This Angular JS doesn't work fine -->
<p>Name : <input type="text" ng-model="name1"></p>
<h1>Hello {{name1}} </h1>
</div>
@stop
</body>
</html>
您可以清楚地看到两个文件中都使用了相同的 Angular Code sn-p，但在“layout.main.blade.php”中它可以工作，而在“child.blade.php”中它不能像在在@section('content') ... @stop 之间我无法理解这是为什么以及如何解决它！！！！！！
这是来自网络面板的响应：
GET localhost:8000
200 OK
localhost:8000
3.4 KB
[::1]:8000
141ms
HeadersResponseHTMLCacheCookies
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Customer Management</title>
<!-- Bootstrap -->
<link media="all" type="text/css" rel="stylesheet" href="http://localhost:8000/css/bootstrap.min
.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost:8000/css/custom.css">
<script src="http://localhost:8000/js/angular/angular.min.js"></script>
<script src="http://localhost:8000/js/controllers.js"></script>
<script src="http://localhost:8000/js/respond.js"></script>
<script src="http://localhost:8000/js/jquery-1.11.2.min.js"></script>
<script src="http://localhost:8000/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"
>
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-arrow-down"></span>
MENU
</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/" ><span class="glyphicon
glyphicon-home"></span> Home</a></li>
<!--<li class="dropdown"><a href="#" data-toggle="dropdown">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Dr. Winthrop</a></li>
<li><a href="#">Dr. Chase</a></li>
<li><a href="#">Dr. Sanders</a></li>
</ul>
</li>-->
<li><a href="cv/index"><span class="glyphicon glyphicon-edit"></span> Make CV</a></li
>
<li><a href="#"><span class="glyphicon glyphicon-eye-open"></span> Example</a></li>
<li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://localhost:8000/users/signin">Sign in</a></li
>
<li><a href="http://localhost:8000/users/newaccount">Sign Up</a></li>
</ul>
</div>
</nav>
</div>
<div class="container" id="container">
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
<div ng-app="">
<p>Name : <input type="text" ng-model="name1"></p>
<h1>Hello {{name1}} </h1>
</div>
</div>
<footer class="footer row ">
<div class="col-lg-4 col-sm-4 col-md-4" id="links">
<h4>Links</h4>
<ul class="list-unstyled">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</footer>
<script>
$("nav ul li").on("click", function() {
$("nav ul li").removeClass("active");
$(this).addClass("active");
});
</script>
</body>
</html>
1 request
3.4 KB
141ms (onload: 1.06s)
【问题讨论】：
-
您能否也显示来自 PHP 请求的组合输出（只需检查网络面板中的响应并将其发布）。建议让服务器端充当 API，使用 JSON 单独通信和编写客户端代码，这将使客户端或服务器的调试和扩展或替换/补充部分更简单。
-
你好@shaunhusain！我已经在这个问题中添加了回复，你能帮帮我吗！