Angularjs 从选择切换到输入的指令-监视不触发

我正在尝试创建一个带有select（下拉菜单）的指令，当您选择其中一个选项时，它将改为输入

下拉列表的值为1-12，其中一个值为“更多…”，当用户选择“更多…”时，选择应更改为输入

问题是这种变化从未发生过

我在一个plunker中有我的代码供人们使用：

var-app=angular.module（'myApp'，[]）；//创建应用程序
app.controller（'myCtrl'，['$scope'，function（$scope）{//simple controller
$scope.value='0'；
$scope.$watch（'value'，函数（newValue，oldValue）{
log（'watch fired in controller'，newValue）；//在更改时写入新值
});
}]); 
指令（'selectSwitch'，函数（）{//
返回{
限制：'E'，
模板：“”+//模板应该知道如何在输入和选择之间切换
''+ 
''+
“{{value}}”+
''+
'',
范围：{
myModel:“=”，//将其绑定到我的模型
},
链接：功能（范围、要素、属性）{
scope.selectSwitchValues=['1'、'2'、'3'、'4'、'5'、'6'、'7'、'8'、'9'、'10'、'11'、'12'、'more…]；//用于选择的值
scope.showInput=false；
作用域.$watch（'myModel'，函数（newValue，oldValue）{//监视指令中的更改
log（'watch fired in directive'）；
如果（scope.myModel==“更多…”）{
控制台日志（“更多”）；
scope.showInput=true；
}
否则{
console.log（scope.myModel）；
}
});
}
};
});

我也用ng开关试过，但也没有成功：

template: '<div ng-switch on="showInput">'+
    '<input ng-model="myModel" ng-switch-when="showInput">'+ 
    '<select ng-model="myModel" ng-switch-default>'+
        '<option ng-repeat="value in selectSwitchValues" value="{{value}}">{{value}}<option>'+
    '<select>'+
    '<div>',

模板：“”+
''+ 
''+
“{{value}}”+
''+
'',

这里有几个问题

1） 要正确更改

myModel

的值，请使用

ngOptions

而不是

ngRepeat

2）

ngIf

（和

ngSwitch

）创建新的子作用域，因此

myModel

未正确更新。使用

ngShow

和

ngHide

代替

template: '<div>'+
    '<input ng-model="myModel" ng-show="showInput">'+  
      '<select ng-model="myModel" ng-hide="showInput" ng-options="value for value in selectSwitchValues">'+
      '<select>'+
  '<div>',

---

正如@Anthony已经指出的，如果创建了新的子作用域，由于使用了ng，所以mymodel没有更新。 如果您想一直使用ng if进行编译以达到特定目的，您可以使用

$parent.myModel

模板如下

template: '<div>'+
    '<input ng-model="$parent.myModel" ng-if="showInput">'+ 
      '<select ng-model="$parent.myModel" ng-if="!showInput" ng-options="value for value in selectSwitchValues">'+
      '<select>'+
  '<div>',

模板：“”+
''+ 
''+
''+
'',

$parent.myModel

template: '<div>'+
    '<input ng-model="$parent.myModel" ng-if="showInput">'+ 
      '<select ng-model="$parent.myModel" ng-if="!showInput" ng-options="value for value in selectSwitchValues">'+
      '<select>'+
  '<div>',