javascript - Angular Directive(指令) : ng-model not updated properly when selection changes

Question

我有以下指令:

app.directive('skiTest', function($timeout,$compile) {
return {
  'replace': true,
  'restrict': 'E',
  'scope': {
    'data': '=',
    'selecto': '@',
      'ngModel': '='
  }, 
  link: function (scope, element, attrs) {
      attrs.$observe("selecto", function () {
          $timeout(function () {  // we need a timeout to compile after the dust has settled
              $compile(element.contents())(scope); //recompile the HTML, make the updated content work.
          },0);
      });
   },
    'template':'<div><select name="testSelect" ng-model="ngModel" ng-options="{{selecto}} in data"><option value="">Code</option></select></div>'
}

});

http://jsfiddle.net/L269zgbd/1/

如果我尝试在指令选择框中选择一个国家/地区，ng-model 对象将被设置为 null。

知道为什么会这样以及如何解决这个问题吗？

基本上，我希望指令选择的行为与非指令选择的行为相同。

谢谢!

Answer 1

如果您升级 fiddle 中使用的 Angular 版本，则以下内容无需使用 $compile 或 $timeout

app.directive('skiTest', function () {
    return {
        'replace': true,
            'restrict': 'E',
            'scope': {
            'data': '=',
                'selecto': '@',
                'ngModel': '='
        },
        'template': '<div><select name="testSelect" ng-model="ngModel" ng-options="{{selecto}} in data"><option value="">Code</option></select></div>'
    }
});

DEMO