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

我是Stackoverflow的新手，这将是我的第一个答案。我也是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放在像我这样的自定义指令中是否可行。

我希望这会有所帮助。

错误：[$ compile：multidir]绑定md-sidenav与控制器（角度材料）

1 个答案: