Laravel 和 AngularJs - 简单路由不调用控制器答案

【问题标题】：Laravel and AngularJs - Simple route doesn't call controllerLaravel 和 AngularJs - 简单路由不调用控制器
【发布时间】：2015-04-24 15:13:55
【问题描述】：

我有一个 laravel 应用程序，我想在刀片部分中使用 AngularJs。我已经包含了我需要的所有文件，添加了 ng-app 并且没有出现 JavaScript 错误。问题是路由由于某种原因没有调用控制器。

应用：

var weatherApp = angular.module('weatherApp', ['ngRoute', 'ngResource', 'ngCookies']);

路线：

// ROUTES
weatherApp.config(function ($routeProvider) {    
    $routeProvider    
      .when('/weather', {
        templateUrl: '/weather',
        controller: 'coordinatesController'
      })    
});

控制器：

// CONTROLLERS
weatherApp.controller('coordinatesController', function() {    
    alert('hello');    
});

刀片模板：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

    {{ HTML::style('css/public.css'); }}

    <!-- Latest compiled and minified JavaScript -->
    {{ HTML::script('https://code.jquery.com/jquery-2.1.3.min.js') }}
    {{ HTML::script('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js') }}
    {{ HTML::script('https://code.angularjs.org/1.3.15/angular.min.js') }}
    {{ HTML::script('https://code.angularjs.org/1.3.15/angular-route.min.js') }}
    {{ HTML::script('https://code.angularjs.org/1.3.15/angular-resource.min.js') }}
    {{ HTML::script('https://code.angularjs.org/1.3.15/angular-cookies.min.js') }}
    {{ HTML::script('js/ngAutocomplete.js') }}
    {{ HTML::script('js/geolocation.js') }}
    {{ HTML::script('js/weather/weatherApp.js') }}

</head>

<body>

<div class="container">
    @if (Session::has('message'))
        <div class="flash alert">
            <p>{{ Session::get('message') }}</p>
        </div>
    @endif

    @yield('main')
</div>

</body>

</html>

刀片部分：

@extends('layouts.public')

@section('main')
    {{ HTML::script('js/weather/weatherApp.js') }}
    {{ HTML::script('js/weather/routes.js') }}
    {{ HTML::script('js/weather/services.js') }}
    {{ HTML::script('js/weather/controllers.js') }}
    {{ HTML::script('js/weather/directives.js') }}
    <div ng-app="weatherApp">
        <div class="row ">
            <div class="col-xs-12 col-md-8"></div>
            <div class="col-xs-6 col-md-4 text-right">
                <div>
                    <ul>
                        <li class="btn btn-default">{{ HTML::linkRoute('home', 'Dashboard') }}</li>
                        <li class="btn btn-default">{{ HTML::linkRoute('backbone.login', 'Backbone') }}</li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6 col-xs-12">
            <h3>Weather Forecast</h3>
            <form ng-submit="submit()">
                <div class="form-group">
                    <input type="text" class="form-control" ng-model="city" ng-autocomplete select-input-value />
                </div>
                <input type="submit" class="btn btn-primary" value="Get Forecast" />
            </form>
        </div>
        <div class="container">
            <table class="table table-bordered">
                <tbody class="table-striped table-hover">
                    <tr>
                        <th>Location</th>
                        <th>Latitude</th>
                        <th>Longitude</th>
                        <th>Temperature</th>
                        <th>Weather</th>
                    </tr>
                </tbody>
            </table>
        </div>
            <hr>

            <footer class="text-center">
                <p>&copy; Company 2014</p>
            </footer>
        </div>
    </div>
@stop

【问题讨论】：

您的控制台出现什么错误？
向我们展示您的刀片文件
我已经编辑了帖子并添加了刀片文件
那么，ng-controller 呢？
天哪，这就是问题所在，耶稣。谢谢

标签： angularjs laravel

【解决方案1】：

您错过了ngController 指令。

为了让你的控制器工作，你需要将相关的标记包装成这样的东西：

<div ng-controller="coordinatesController">
  …
</div>

【讨论】：

【解决方案2】：

你有一个错字，在你的路由中你正在寻找coordinatesControllers，而控制器声明最后没有s。

我认为这是问题所在，您对 controller 一词的使用并未指定后端或客户端控制器

【讨论】：

我改了，还是没区别
不清楚是什么问题，在开发工具的网络选项卡中检查模板的ajax请求并确保它成功
200或304都成功
所以你是说警报永远不会触发？会发生什么，尤其是在 url 中？也抛出任何错误？

【解决方案3】：

不确定，也许可以尝试将您的 ng-app 指令从刀片视图中移出到刀片模板中。我曾经在 ng-controller 指令上遇到过类似的问题。

<body>

<div class="container" data-ng-app="weatherApp">
    @if (Session::has('message'))
        <div class="flash alert">
            <p>{{ Session::get('message') }}</p>
        </div>
    @endif

    @yield('main')
</div>

</body>

还要确保在路由中指定 .otherwise。

weatherApp.config(function ($routeProvider) {    
    $routeProvider    
      .when('/weather', {
        templateUrl: '/weather',
        controller: 'coordinatesController'
      })
      .otherwise({ redirectTo: '/'});
    });

https://docs.angularjs.org/tutorial/step_07

【讨论】：