не работает контролер angluar

477

31 марта 2018, 18:22

    
 
   angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 
   .controller('AppCtrl', function ($scope, $mdSidenav) { 
    $scope.toggleLeft = buildToggler('left'); 
 
    function buildToggler(componentId) { 
      return function() { 
        $mdSidenav(componentId).toggle(); 
      }; 
    } 
  });

<html lang="en" > 
<head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <!-- Angular Material style sheet --> 
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css"> 
</head> 
<body ng-cloak> 
  <!-- 
    Your HTML content here 
  -->   
<div ng-controller="AppCtrl" layout="column" style="height: 500px;" ng-cloak="" class="sidenavdemoCustomSidenav" ng-app="MyApp"> 
 
  <section layout="row" flex=""> 
 
    <md-sidenav class="md-sidenav-left" md-component-id="left" md-disable-backdrop="" md-whiteframe="4"> 
 
      <md-toolbar class="md-theme-indigo"> 
        <h1 class="md-toolbar-tools">Disabled Backdrop</h1> 
      </md-toolbar> 
 
      <md-content layout-margin=""> 
        <p> 
          This sidenav is not showing any backdrop, where users can click on it, to close the sidenav. 
        </p> 
        <md-button ng-click="toggleLeft()" class="md-accent"> 
          Close this Sidenav 
        </md-button> 
      </md-content> 
 
    </md-sidenav> 
 
    <md-content flex="" layout-padding=""> 
 
      <div layout="column" layout-align="top center"> 
        <p> 
          Developers can also disable the backdrop of the sidenav.<br> 
          This will disable the functionality to click outside to close the sidenav. 
        </p> 
 
        <div> 
          <md-button ng-click="toggleLeft()" class="md-raised"> 
            Toggle Sidenav 
          </md-button> 
        </div> 
 
      </div> 
 
    </md-content> 
 
  </section> 
 
</div> 
 
<!-- 
Copyright 2016 Google Inc. All Rights Reserved.  
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license. 
--> 
   
  <!-- Angular Material requires Angular.js Libraries --> 
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> 
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script> 
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script> 
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script> 
 
  <!-- Angular Material Library --> 
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script> 
   
  <!-- Your application bootstrap  --> 
 
   
</body> 
</html>

пишет ошибку Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.9/$controller/ctrlreg?p0=AppCtrl не могу понять в чем проблема

Answer 1

material.svgAssetsCache не подключен (возможно его не нужно подключать вообще):

angular.module('MyApp', ['ngMaterial', 'ngMessages']) 
  .controller('AppCtrl', function($scope, $mdSidenav) { 
    $scope.toggleLeft = buildToggler('left'); 
 
    function buildToggler(componentId) { 
      return function() { 
        $mdSidenav(componentId).toggle(); 
      }; 
    } 
  });

<html lang="en"> 
 
<head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <!-- Angular Material style sheet --> 
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css"> 
</head> 
 
<body ng-cloak ng-app="MyApp"> 
  <!-- 
    Your HTML content here 
  --> 
  <div ng-controller="AppCtrl" layout="column" style="height: 500px;" ng-cloak="" class="sidenavdemoCustomSidenav"> 
 
    <section layout="row" flex=""> 
 
      <md-sidenav class="md-sidenav-left" md-component-id="left" md-disable-backdrop="" md-whiteframe="4"> 
 
        <md-toolbar class="md-theme-indigo"> 
          <h1 class="md-toolbar-tools">Disabled Backdrop</h1> 
        </md-toolbar> 
 
        <md-content layout-margin=""> 
          <p> 
            This sidenav is not showing any backdrop, where users can click on it, to close the sidenav. 
          </p> 
          <md-button ng-click="toggleLeft()" class="md-accent"> 
            Close this Sidenav 
          </md-button> 
        </md-content> 
 
      </md-sidenav> 
 
      <md-content flex="" layout-padding=""> 
 
        <div layout="column" layout-align="top center"> 
          <p> 
            Developers can also disable the backdrop of the sidenav.<br> This will disable the functionality to click outside to close the sidenav. 
          </p> 
 
          <div> 
            <md-button ng-click="toggleLeft()" class="md-raised"> 
              Toggle Sidenav 
            </md-button> 
          </div> 
 
        </div> 
 
      </md-content> 
 
    </section> 
 
  </div> 
 
  <!-- 
Copyright 2016 Google Inc. All Rights Reserved.  
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license. 
--> 
 
  <!-- Angular Material requires Angular.js Libraries --> 
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> 
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script> 
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script> 
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script> 
 
  <!-- Angular Material Library --> 
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script> 
 
  <!-- Your application bootstrap  --> 
 
 
</body> 
 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Прорисовка карты с маршрутом

Подскажите, пожалуйста, как можно отключить прорисовку маршрута до полной его готовностиТо есть показать карту только когда весь весь маршрут...

251

javascript

Отменить переход по ссылке

Всем привет, есть вообщем ссылка:

264

javascript

Блокировка ориентации экрана с помощью javascript

Имеется ли возможность средствами javascript запретить смену ориентации экрана? CSS в моём случае не подходитПробовал Screen Orientation API, но в chrome не сработало,...

276

javascript

JS Object && Function. Кто может пояснить мой пример?

В консоли выполнил две команды на понимание кто кому прототип и получил дважды trueХочу понимать в чем кроется секрет и кто кому из них прототип...

275