Question

我正在尝试将Angular JS与Laravel 4.2一起使用。我已经将刀片的默认{{}}更改为[[]]，它工作得很好，现在的问题是，当我将Angular JS代码放在主布局（视图）中时，它可以工作，但是当我将Angular JS代码放入一个孩子时view（实际上子视图扩展了主要布局，部分是使用@section（'contents'）生成的... Angular JS代码... @stop）它根本不起作用，浏览器无法呈现Angular JS exprerssion并在代码编辑器中显示它！这是我的“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片段，但是在“layout.main.blade.php”中它可以使用，而在“child.blade.php”中它不起作用，因为它在@之间部分（'内容'）... @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)

Answer 1

我不是刀片用户，因此我无法确切地告诉您如何解决此问题。我使用PHP，但我使用Eloquent（Laravel的ORM部分）并使用Slim进行服务器端路由。我认为最好将HTML简单地编写为HTML，使用$ http（基本上与$ .ajax相同）将数据导入客户端代码，但将它们写成完全独立的代码库。这将为您提供更大的灵活性，并大大简化调试任务，因为您不是要同时解决服务器和客户端之间的问题。您可以使用curl或POSTMan单独测试服务器，然后可以使用模拟对象或对服务器端组件的实际请求单独构建/测试客户端。

在客户端，您显示输出的内容有很多问题，多个html标签（文档应为1）多个ng-app（相同，1通常用于html或body标签上的页面））。

对于bootstrap使用ui-bootstrap，你需要常规的bootstrap.css文件和ui-bootstrap-tpls.js文件，但不需要bootstrap.js。

如果您要将jQuery绑定到某些元素上的click事件，您应该在标记中使用ng-click指令，也可以使用ng-class有条件地添加/删除基于该元素的元素的类模型的状态。

似乎你已经大致了解了如何使用所有这些东西，但你需要明确区分事物并停止使用jQuery一段时间来习惯如何正确地使用Angular。如果你试图在Angular的指令或测试之外使用jQuery，你通常会做错事。有关详细信息，请参阅"Thinking in AngularJS" if I have a jQuery background?

Angular JS在主布局（视图）中工作，但不在laravel 4.2的子视图中工作

1 个答案: