Error: [$compile:multidir] while binding md-sidenav with controller (angular material)

Question

我想使用 Angular Material 创建带有侧边菜单的应用程序。我收到错误：[$compile:multidir].

我做错了什么？

这是我的 index.html:

<!doctype html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <link href="/css/angular-material.min.css" rel="stylesheet" />
</head>

<body>
    <div class="container" layout="row" flex>
        <md-sidenav ng-controller="leftMenuController" md-is-locked-open="true">Sidenav</md-sidenav>
        <md-content flex id="content" flex><ng-view></ng-view></md-content>
    </div>

<script src="/js/lib/angular.min.js" type="text/javascript"></script>
<script src="/js/lib/angular-animate.min.js" type="text/javascript"></script>
<script src="/js/lib/angular-aria.min.js" type="text/javascript"></script>
<script src="/js/lib/angular-sanitize.min.js" type="text/javascript"></script>
<script src="/js/lib/angular-route.min.js" type="text/javascript"></script>
<script src="/js/lib/angular-material.min.js" type="text/javascript"></script>
<script src="/js/engine.js" type="text/javascript"></script>
<script src="/js/controllers/leftMenuController.js"></script>
<script src="/js/controllers/authController.js"></script>
<script src="/js/controllers/clientsController.js"></script>

</body>
</html>

这是我的 leftMenuController：

myApp.controller('leftMenuController',
    function leftMenuController($scope, $location){
        console.log("leftMenuController" + $location.url().toString());
    }
);

这是我的 auth.html 和 authController.js:

<div ng-controller="authController">
    <md-button class="md-raised" ng-click="login()">Button</md-button>
</div>

myApp.controller('authController',
    function authController($scope, $location){
        $scope.login = function () {
            $location.path( "/clients" );
        }
    }
);

这是我的 engine.js:

var myApp = angular.module('myApp', ["ngRoute", "ngMaterial"])
.config(function($routeProvider){
    $routeProvider.when('/auth',
        {
            templateUrl:'/views/auth.html',
            controller:'authController'
        });
    $routeProvider.when('/clients',
        {
            templateUrl:'/views/clients.html',
            controller:'clientsController'
        });
    $routeProvider.otherwise({redirectTo: '/auth'});
});

Answer 1

我是 Whosebug 的新手，这将是我的第一个答案。我也是 JavaScript 和 Angular 的新手，但是因为我运行遇到了和你一样的问题，我想我有正确的答案。

md-sidenav 指令有它自己的控制器： https://github.com/angular/material/blob/master/src/components/sidenav/sidenav.js

你得到的错误基本上是说你不能将两个控制器分配到同一个范围（请原谅我不正确的术语）

根据您想在 leftMenuController 中执行的操作，您只需将其分配给 HTML 中的不同元素即可。我用它来显示导航菜单选项，所以我将它分配到我的 md-sidenav 中的 md-list。

我实际上为 sidenav (nav-menu.html) 创建了一个自定义指令：

<md-sidenav md-is-locked-open="$mdMedia('gt-sm')" md-component-id="navigation">
  <md-toolbar hide-gt-sm layout-align="center center">
    <md-button class="md-icon-button" hide-gt-sm aria-label="Settings" ng-click="TlbCtrl.toggle()">
    <span>Navigation</span>
  </md-toolbar>
  <md-list  ng-controller="NavMenuController as navCtrl">
    <md-list-item ng-repeat="nav in navCtrl.navMenu" ng-click="navCtrl.hide()" ng-href="{{nav.ref}}" target="{{nav.target}}">{{nav.name}}</md-list-item>
  </md-list>
</md-sidenav>

这是自定义指令：

(function() { 'use strict';

 angular.module('VissenKom')
 .directive('navigationMenu', function(){
    // Runs during compile
    return {
        restrict: 'E',
        templateUrl: 'components/nav-menu.html',
    };
 });
})();

这是控制器：

(function() { 'use strict';

 angular.module('VissenKom')
 .controller('NavMenuController', ['$mdSidenav', function($mdSidenav){
  // Hide after click
  this.hide = function () {
    // Only close when not locked open
    if (!$mdSidenav('navigation').isLockedOpen()){
    $mdSidenav('navigation').close();
  }
  };

  // Nav menu entries
  this.navMenu = [{
    name: 'Home',
    ref: '#/'
  },{
    name: 'Metingen',
    ref: '#/metingen'
  },{
    name: 'Vissen',
    ref: '#/vissen'
  },{
    name: 'Aquarium',
    ref: '#/aquarium'
  }];
 }]);
})();

还有我的一部分 index.html:

  <div layout="row">
    <navigation-menu></navigation-menu>
    <md-content id="content" layout-margin><ng-view></ng-view></md-content>
  </div>

我也见过控制器附加在 md-sidenav 指令之外的例子，但我不确定如果你像我一样将 sidenav 放在自定义指令中是否可行。

希望对您有所帮助。

Error: [$compile:multidir] while binding md-sidenav with controller (angular material)

Error: [$compile:multidir] while binding md-sidenav with controller (angular material)

javascript

angularjs

angularjs-material