将 ng-model 传递给自定义指令并使其工作的问题

Question

我创建了一个自定义指令，可以自动填充 select 国家列表。该指令有一个 preselect isolate scope 属性，如果设置为 true 将 preselect 一个国家。

ng-model 也作为隔离范围属性传递问题是 ng-model 不会被设置 .

任何人都可以给我一些关于如何制作 <auto-countries> 指令以便我能够设置 ng-model 的指示吗？

这是我的指令代码：

app.directive('autoCountries', function() {
    return {
        restict: 'E',
        controller: 'CountriesCtrl as ctrl',
        scope: {
            preselect: '=',
            ngModel: '='
        },
        template: [

            '<select ng-if="!preselect" ng-model="ngModel">',
                '<option value="">Select Country</option>',
                '<option ng-repeat="country in ctrl.countries" value={{country.name}}>',
                    '{{country.name}}',
                '</option>',
            '</select>',

            '<select ng-if="preselect" ng-model="ngModel">',
                '<option ng-repeat="country in ctrl.countries" ng-selected="ctrl.countryFromIP == country.name" value={{country.name}}>',
                    '{{country.name}}',
                '</option>',
            '</select>',
        ].join('')
    }
})

更奇怪的是，在指令的 更简单版本 中根本不使用 preselect，ng-model将被设置。

没有例子有点难以理解，所以这里有一个Plunkr！ http://plnkr.co/edit/e1HPgGQlne7Q4TcNJ9XT?p=preview

Answer 1

您不应该在 <option> 上使用 ng-repeat，而是在 <select> 上使用 ng-options：

  <select ng-model="ngModel" ng-options="country.name as country.name for country in ctrl.countries"></select>

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

Answer 2

您应该使用 ngOptions 而不是 ngRepeat。我 fork dave's plnkr 并稍微调整了一下。有预选和没有预选的模板将如下所示：

'<select ng-model="ngModel" ng-options="country.name as country.name for country in ctrl.countries"></select>'

我在国家/地区控制器而不是 view/template 中进行了预选，就像在 angular 的 ngOptions 文档中一样。

$scope.ngModel = $scope.preselect ? $scope.ngModel = vm.countries[3].name : "";

（如果预选等于 true，则为 ngModel 设置默认值，否则设置空字符串 - javascript 三元运算符。）

将 ng-model 传递给自定义指令并使其工作的问题

Issues with passing ng-model to custom directive and making it work

angularjs

angularjs-directive

angular-ngmodel

isolate-scope

angularjs-select