mardi 5 mai 2015

Angular JS works in main layout(view) but not in child view of laravel 4.2

I'm trying to use Angular JS with Laravel 4.2. I've changed the blade's default {{}} into [[]], it works perfectly, now the problem is that when I puts Angular JS code in main layout (view) it works but when I put Angular JS code in a child view(actually child view extends the main layout and section is yielded using @section('contents') ...Angular JS code... @stop) it doesn't work at all, browser can't render the Angular JS exprerssion and shows it as it is in code editor! Here is my "main layout.blade.php" and "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>

You can see clearly that same Angular Code snippet is used in both files but in "layout.main.blade.php" it works and in "child.blade.php" it doesn't work as it is in between @section('content') ... @stop I can't get understand why this is and how to solve it!!!!!!

Aucun commentaire:

Enregistrer un commentaire