自定义指令模型在 ng-switch 中不起作用

我试图使用 AngularJS 提供一个可切换的下拉列表，其中选择各种选项将触发不同的列表。ng-switch似乎是正确的方法，但我的ng-model在内部时不具有约束力ng-switch。如果我不使用，绑定工作正常ng-switch，但如果是这种情况，我不知道如何切换我的下拉列表。这里可能有什么问题？

js小提琴：http://jsfiddle.net/tanweihao88/LUzXT/3/ http://jsfiddle.net/tanweihao88/LUzXT/3/

HTML:

<select ng-model="periodRangeModel" ng-options="item for item in items"></select>
<div ng-switch on="periodRangeModel">
    <span ng-switch-when="Month"><period-selector items="monthOptions" ng-model="periodModel"></period-selector></span>
    <span ng-switch-when="Quarter"><period-selector items="quarterOptions" ng-model="periodModel"></period-selector></span>
    <br>
</div>

JS:

angular.module('myApp', [])
.controller("MyCtrl", function($scope) {
    $scope.items = ['Month', 'Quarter'];
    $scope.periodRangeModel = "Month";
    $scope.quarterOptions = ["Jan-Mar", "Apr-Jun", "Jul-Sept", "Oct-Dec"];
    $scope.monthOptions = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    $scope.periodModel = $scope.monthOptions[0];
})
.directive('periodSelector', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: { items: '=', ngModel: '='},
        template: "<span><select ng-options='period for period in items' ng-model='ngModel'></select></span>"
    }
});

绑定无法按预期工作的主要原因是ng-switch创建一个新的范围，当绑定到原始字符串时periodModel没有按照您的预期进行更新（因为新范围的periodModel正在更新中）。

这个问题 https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs有更多关于幕后发生的事情的详细信息，您可以查看Angular Batarang Chrome 扩展 https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en直观地看到正在发挥作用的各种范围。

您可以通过绑定到对象值来绕过它，例如这个更新的小提琴 http://jsfiddle.net/LUzXT/4/。主要变化是：

1）改变periodModel到一个对象并设置一个属性（在本例中称为value)

$scope.periodModel = {
    value: $scope.monthOptions[0]
};

2）更改任意绑定代码即可访问periodModel.value代替periodModel

<period-selector items="monthOptions" ng-model="periodModel.value"></period-selector>

Model: {{periodModel.value}} (this is supposed to change)