Question

我有一个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

Answer 1

您错过了ngController指令。

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

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

Answer 2

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

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

Answer 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

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

3 个答案: