我想使用 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'});
});
最佳答案
我是 Stackoverflow 的新手，这将是我的第一个答案。我也是 JavaScript 和 Angular 的新手，但由于我遇到了与您相同的问题，我想我的答案是正确的。
md-sidenav 指令有它自己的 Controller : https://github.com/angular/material/blob/master/src/components/sidenav/sidenav.js
你得到的错误基本上是说你不能将两个 Controller 分配到同一个范围(请原谅我不正确的术语)
根据您想在 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',
};
});
})();
这是 Controller :
(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>
我也见过 Controller 附加在 md-sidenav 指令之外的示例，但我不确定如果您像我一样将 sidenav 放在自定义指令中是否可行。
希望对您有所帮助。
关于javascript - 错误 : [$compile:multidir] while binding md-sidenav with controller (angular material)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35911146/