Question

我创建了这个Plnkr：http://plnkr.co/edit/arDdiLzShLI9lKTTAKGW?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.options = {"id":1,"name":"One"},
                   {"id":2,"name":"Two"},
                   {"id":3,"name":"Three"};
  $scope.exam = 99;
  $scope.typeChanged = function() {
    alert($scope.exam)
  }
});

app.directive("adminSelect", function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            adminChange: "&",
            adminModel: "=",
            options: "="
        },
        template: '<select ng-change="adminChange()" \
                          ng-model="adminModel" \
                          ng-options="item.id as item.name for item in options"></div>',
        controller: function ($scope, $element, $attrs) {
        }
    };
});

这是调用指令的HTML：

<div admin-select
  label="ExamType"
  admin-change="typeChanged()"
  admin-model="exam"
  options="options"></div>

  Type: {{ exam }}

有人可以告诉我为什么我的选择框没有填充，我怎样才能获得警报以给我正确的值？

Answer 1

您的$ scope.options不是数组。

你忘了将它包装成[]。

$scope.options = [{"id":1,"name":"One"},
               {"id":2,"name":"Two"},
               {"id":3,"name":"Three"}];

Answer 2

我认为你正在尝试做这样的事情：

http://plnkr.co/edit/W1MMx7vjKKXFuV8LbBjJ?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.options = [{"id":1,"name":"One"},
                   {"id":2,"name":"Two"},
                   {"id":3,"name":"Three"}];
  $scope.typeChanged = function(){alert("it changed!");};
  $scope.exam = $scope.options[0];
});

app.directive("adminSelect", function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            label: '=adminLabel',
            change: "&adminChange",
            innerModel: "=adminModel",
            options: "=adminOptions"
        },
        template: '<div><select ng-change="change()" \
                          ng-model="innerModel" \
                          ng-options="item.name for item in options"></div>'
    };
});

<强>更新

我找到了解决问题的方法，你可以这样做：

http://plnkr.co/edit/VWaRWM4KhfU4VWVPSp2E?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.options = [{"id":1,"name":"One"},
                   {"id":2,"name":"Two"},
                   {"id":3,"name":"Three"}];
  $scope.typeChanged = function(item){alert(item.name);};
  $scope.exam = $scope.options[0];
});

app.directive("adminSelect", function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            label: '=adminLabel',
            change: "&adminChange",
            innerModel: "=adminModel",
            options: "=adminOptions"
        },
        template: '<div><select ng-change="innerTypeChanged()" \
                          ng-model="innerModel" \
                          ng-options="item.name for item in options"></div>',
        controller: function($scope){
          $scope.innerTypeChanged = function(){
            $scope.change({item:$scope.innerModel});
          };
        }
    };
});

您还需要更新此行：

  admin-change="typeChanged(item)"

如何在指令模板中创建填充<select>？</select>

2 个答案: