Question

我正在使用Angular 1.4.7而我正在尝试创建一个非常简单的指令来创建下拉列表。我认为这可能是ng-options中我的范围参考的一个问题，但我没有看到我出错的地方。

我看到示例变量已绑定，但不是我的下拉列表。我认为我的语法正确，但显然有些不对劲。

我错过了什么？

Answer 1

您的选择中缺少ng-model。这就是角度如何知道如何处理您选择的值。

我用Angular v1.2.1测试了这个，但不是v1.4.7，但是它有相同的行为。

另外我相信你需要restrict，但我承认我可能错了。

编辑：该声明不正确，只是在文档中找到了这个：

注意：创建指令时，默认情况下仅限于属性和元素。要创建由类名触发的指令，您需要使用restrict选项。

位于此部分下方：https://docs.angularjs.org/guide/directive#template-expanding-directive

所以你的指令是：

angular.module('app')
       .directive('inventorytest', function () {
    return {
        restrict: 'A',
        template: '<select ng-model="selected" ng-options="inv.code as inv.desc for inv in ctrl.invTypes"></select>{{ctrl.sample}}. Selected: {{selected}}',

        scope: {},
        controller: function () {
            this.invTypes = [
                { code: 'A', desc: 'Alpha' },
                { code: 'B', desc: 'Bravo' },
                { code: 'C', desc: 'Charlie' },
            ];
            this.sample = 'Hello';
        },
        controllerAs: 'ctrl'
    }
});

请参阅它的小提琴：http://jsfiddle.net/nh9ntgoj/1/

Answer 2

你错过了ng-model，看：

    angular
    .module('myApp', [])
     .directive('inventorytest', function () {
return {
    template: '{{ctrl.inv}} <select ng-model="ctrl.inv" ng-options="inv.code as inv.desc for inv in ctrl.invTypes"></select>',

    scope: {},
    controller: function () {
        this.invTypes = [
            { code: 'A', desc: 'Alpha' },
            { code: 'B', desc: 'Bravo' },
            { code: 'C', desc: 'Charlie' },
        ];
        this.sample = 'Hello';
        this.inv = ''
    },

    controllerAs: 'ctrl'
}

}）;

为什么这个使用ng-options和controllerAs的Angular下拉指令不起作用？

2 个答案: