我正在尝试使用Angular Material UI实现选择下拉列表。
<md-select class="width-100" placeholder="Priority" data-ng-model="task.priority">
<md-option value="one">One</md-option>
<md-option value="two">Two</md-option>
<md-option value="three">Three</md-option>
<md-option value="four">Four</md-option>
<md-option value="five">Five</md-option>
</md-select>
我已经使用了上面的代码，但每次我收到此错误：
错误：[$ compile：ctreq]无法找到指令'mdOption'所需的控制器'mdSelectMenu'！
我发现了下面描述的其他解决方案。
首先，我放置了在NG-REPEAT代码中抛出Angular异常的字段的HTML，并且在Angular的JavaScript代码中，当界面准备好构建时，我在列表内部进行了推送。
在更改之前我的HTML下面：
<div class="form-group" layout="row" flex>
<md-input-container layout="column" flex>
<label>Field Name</label>
<md-select ng-model="service.selectedChart.serieField">
<md-option ng-repeat="column in columns" ng-value="column.columnName">
{{column.columnName}}
</md-option>
</md-select>
</md-input-container>
</div>
更改后的HTML：
<div ng-repeat="control in controls">
<div class="form-group" layout="row" flex>
<md-input-container layout="column" flex>
<label>Field Name</label>
<md-select ng-model="service.selectedChart.serieField">
<md-option ng-repeat="column in columns" ng-value="column.columnName">
{{column.columnName}}
</md-option>
</md-select>
</md-input-container>
</div>
</div>
在JavaScript中，在填充模型中的信息以显示我的md-select的选项之前，我使用空数组设置我的NG-REPEAT模型，如下所示：
$scope.controls = [];
在准备好呈现所有数据之后，我只需使用此命令在我的数组中添加一个新项。
$scope.controls = [{}];
我在我的应用程序的3个位置使用此代码，它工作正常。这些字段位于$ mdDialog中的表单中。
使用<md-select>。请参阅以下代码段：
angular.module('materialApp', ['ngMaterial', 'ngAnimate'])<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
<body ng-app="materialApp">
<md-select class="width-100" placeholder="Priority" data-ng-model="task.priority">
<md-option value="one">One</md-option>
<md-option value="two">Two</md-option>
<md-option value="three">Three</md-option>
<md-option value="four">Four</md-option>
<md-option value="five">Five</md-option>
</md-select>
</body>为简化Claudio的答案：
在控制器中添加一个变量，您可以将其用作标志来显示/隐藏对话框html模板。
$scope.show_filters = false;
然后用你可以启用/禁用的div围绕你的对话框html模板，如下所示：
<div ng-if="show_filters">
//your dialog template html goes here
</div>
然后，在您的控制器中，每当您想要打开对话框时，请执行以下操作：
$scope.show_filter_dialog = function() {
$scope.show_filters = true; //we enable the div right before we show the dialog
$mdDialog.show({
scope: $scope,
preserveScope: true,
bindToController: true,
templateUrl: 'views/filters.html',
parent: angular.element(document.body),
clickOutsideToClose: true
}).finally(function() {
$scope.show_filters = false; //we disable it when the dialog is closed
});
};
这避免了md-select中的错误
根据官方docs你应该使用md-select，而不是md-select-menu。重写如下：
<md-select class="width-100" placeholder="Priority" data-ng-model="task.priority">
<md-option value="one">One</md-option>
<md-option value="two">Two</md-option>
<md-option value="three">Three</md-option>
<md-option value="four">Four</md-option>
<md-option value="five">Five</md-option>
</md-select>