无法让控制器工作AngularJS

时间：2016-06-07 11:45:40

标签： javascript angularjs controller

经过多次尝试，我仍然无法让单个控制器正常工作。 我最近做了一些有角度的项目，无论我尝试什么，我的控制器都不起作用。

在最后一个项目中，所有内容都在同一个html文件中，以下是我所使用的完整代码：

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="node_modules/angular-material/angular-material.min.css">
    <script src="node_modules/angular/angular.min.js"></script>
    <script src="node_modules/angular-route/angular-route.min.js"></script>
    <link href="node_modules/ng-material-floating-button/mfb/dist/mfb.min.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body layout="column" ng-app="MyApp">
    <div id="welcomeDiv" style="display:none; position: fixed; height: 100%; width: 100%; left: 0; top: 0; background: rgba(51,51,51,0.4); z-index: 10;">
        <div style="width: 50vw; background-color: #009aa6; margin: auto; margin-top:10vw; height: 26vw;">
            <div style="font-size:2vw; color: white; margin-left: 0.8vw;">CREER UNE RESERVATION</div>

            <div style="font-size: 1vw; color: white; margin-left: 0.8vw;">Titre de la réservation</div>
            <input type="text" style="border-radius: 3px; border: none; margin-left: 0.8vw; width: 20vw; margin-top: 0.2vw; height: 1.8vw">

            <div style="font-size: 1vw; color: white; margin-left: 0.8vw; margin-top: 1vw">Type</div>
            <select class="form-control" style="margin-top: 0.2vw; margin-left: 0.8vw; width: 20vw; height: 1.8vw">
                <option>Réunion</option>
                <option>Evènement</option>
                <option>Visite</option>
            </select>

            <div style="font-size: 1vw; color: white; margin-left: 0.8vw; margin-top: 2.4vw;">Description</div>
            <input type="text" style="border-radius: 3px; border: none; margin-left: 0.8vw; width: 20vw; margin-top: 0.2vw; height: 10vw">

            <div ng-controller="AppCtrl" style='padding: 40px;' ng-cloak>
                <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
            </div>

            <input type="button" name="answer" value="Cacher" onclick="hideDiv()" style="margin-left: 1vw; float: bottom; width: 4vw;" />

        </div>
    </div>
    <div id="contenu">
        <md-toolbar>
            <div class="cyanMenu">
                <div class="white">
                    <a href="#demo" data-toggle="collapse" style="color: white; text-decoration: none;"><i class="fa fa-angle-down" style="text-shadow: 0 0 8px #555; margin-right: 3vw;"></i>1 MAI 2016</a>
                    <div id="demo" class="collapse">
                        MauvaisDéploiment
                    </div>
                </div>
            </div>
        </md-toolbar>

        <div class="container" layout="row">
            <md-sidenav md-is-locked-open="false" class="nav">
                <div class="cyanNav">574</div>
                <div class="whiteText">Nantes</div>
                <i class="material-icons" style="font-size: 4vw; margin-left: 1.8vw; margin-top: 2vw; color: white;">date_range</i>
                <i class="material-icons" style="font-size: 4vw; margin-left: 1.8vw; margin-top: 2vw; color: white;">notifications</i>
                <i class="material-icons" style="font-size: 4vw; margin-left: 1.8vw; margin-top: 2vw; color: white;">equalizer</i>


            </md-sidenav>

            <md-content id="content">

            </md-content>
        </div>
        <input type="button" name="answer" value="+" onclick="showDiv()" style="margin-left: 6.5vw; bottom: 0; margin-bottom: 3vw; position: absolute" class="bout_rond"/> 
    </div>

<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-aria/angular-aria.min.js"></script>
<script src="node_modules/angular-material/angular-material.min.css"></script>

<script>
    'use strict';

    angular.module( 'MyApp', ['ngMaterial', 'ngMessages']).controller('AppCtrl', function($scope) {
            $scope.myDate = new Date();
            $scope.minDate = new Date(
            $scope.myDate.getFullYear(),
            $scope.myDate.getMonth() - 2,
            $scope.myDate.getDate());
            $scope.maxDate = new Date(
            $scope.myDate.getFullYear(),
            $scope.myDate.getMonth() + 2,
            $scope.myDate.getDate());
        $scope.onlyWeekendsPredicate = function(date) {
            var day = date.getDay();
            return day === 0 || day === 6;
        };
    });

    function showDiv() {
        document.getElementById('welcomeDiv').style.display = "block";
        document.getElementById('contenu').style.display = "none";
    }
    function hideDiv() {
        document.getElementById('welcomeDiv').style.display = "none";
        document.getElementById('contenu').style.display = "block";
    }
</script>
<style>
    .nav {
      background-color:#3e3d40;
      width:8%;
      box-shadow: 5px 0px 20px -1px #888;
      z-index: 2;
    }
    .bout_rond {
        display:block;
        width:3vw;
        height:3vw;
        line-height:3vw;
        border-radius: 50%;
        color:#f5f5f5;
        text-align:center;
        text-decoration:none;
        background: #009aa6;
        box-shadow: 5px 0px 20px -1px #888;
        font-size:1.4vw;
        font-weight:bold;
        z-index: 3;
    }
    .cyanNav {
      margin-left: 15%;
      color:#009aa6;
      font-size: 3vw;
    }
    .cyanMenu {
      background-color:#009aa6;
      font-size: 3.8vw;
      margin-left: 6%;
      z-index: -1000;
    }
    .whiteText {
      color: white;
      margin-left: 15%;
      font-size: 2vw;
      margin-top: -15%;
    }
    .white {
      color: white;
      margin-left: 4%;
    }
    .content {
      background-color: #c7czba;
    }
    [ng-cloak] {
      display: none;
    }
    @font-face {
        font-family: 'Material Icons';
        font-style: normal;
        font-weight: 400;
        src: url(rsc/MaterialIcons-Regular.woff);
        src: local('Material Icons'),
        local('MaterialIcons-Regular'),
            url(rsc/MaterialIcons-Regular.woff2) format('woff2'),
            url(rsc/example.com/MaterialIcons-Regular.woff) format('woff'),
            url(rsc/example.com/MaterialIcons-Regular.ttf) format('truetype');
    }
    .material-icons {
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;  /* Preferred icon size */
        display: inline-block;
        line-height: 1;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        direction: ltr;
         /* Support for all WebKit browsers. */
        -webkit-font-smoothing: antialiased;
        /* Support for Safari and Chrome. */
        text-rendering: optimizeLegibility;
         /* Support for Firefox. */
        -moz-osx-font-smoothing: grayscale;
         /* Support for IE. */
        font-feature-settings: 'liga';
    }
</style>
</body>
</html>

我收到 2个错误：

Uncaught SyntaxError: Unexpected token {

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=MyApp&p1=Error%3A%2…4-millenium.c9users.io%2Fnode_modules%2Fangular%2Fangular.min.js%3A21%3A19)

（导致关于ngRoute的一个有角度的页面，我真的不明白）

我尝试过创建var app = angular.module(...)之类的一些内容，但是当我这样做时，我收到一个错误，说应用不是一个函数，然后我尝试将整个脚本放在{{1}中但仍然得到同样的错误。

我确定我错过了一些但却找不到它的东西。

哦，如果你想看看整个＆＃34;工作＆＃34;这是一个cloud9项目的链接。项目： https://ide.c9.io/millenium/test574-cloned

2 个答案:

答案 0 :(得分：1)

您的代码失败是因为您已将ngMaterial列为MyApp的依赖项，但您从未加载角度材质库。修复此问题很简单，只需将这样的脚本标记添加到您的html：

即可 
<script src="node_modules/angular-material/angular-material.js"></script>

您似乎也没有加载ngMessages库，因此您还必须为其添加脚本标记：

<script src="url/to/ngMessages/library"></script>

答案 1 :(得分：1)

当您将css文件包含为脚本

时，会出现第一个错误 
<script src="node_modules/angular-material/angular-material.min.css"></script>

应该是

<script src="node_modules/angular-material/angular-material.min.js"></script>

第二个错误正在发生，因为您的来源中未包含angular-messages.js。

导入angular.js脚本

后，请尝试添加以下内容 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-messages.js"></script>
相关问题
最新问题