Question

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

下拉列表的值为1-12，一个值为“more ...”，当用户选择“more ...”时，select应更改为输入。

问题是改变永远不会发生。

我在这里有一个关于玩家的代码：http://plnkr.co/edit/3SyFIYULDHMKgkJmtPtP?p=preview

var app = angular.module( 'myApp', [] ); // create app

app.controller( 'myCtrl', [ '$scope', function ( $scope ){ // simple controller
  $scope.value = '0';
  $scope.$watch('value', function(newValue, oldValue){
      console.log('watch fired in controller', newValue); // write the new value on change
  });
}]); 

app.directive('selectSwitch', function () { // the directive
  return {
  restrict: 'E', 
  template: '<div>'+  // template should know to switch between input and select
        '<input ng-model="myModel" ng-if="showInput" />'+ 
        '<select ng-model="myModel" ng-if="!showInput">'+
          '<option ng-repeat="value in selectSwitchValues" value="{{value}}">{{value}}<option>'+
        '<select>'+
      '<div>',
  scope: { 
      myModel: '=', // tie it to my model
  },
  link: function (scope, elem, attrs) {
    scope.selectSwitchValues = ['1','2','3','4','5','6','7','8','9','10','11','12','more...']; // values for select
    scope.showInput = false; 
    scope.$watch('myModel', function(newValue, oldValue){ // watch for changes in directive
      console.log('watch fired in directive');
      if(scope.myModel === "more..."){
        console.log("more");
        scope.showInput = true;
      }
      else {
        console.log(scope.myModel);
      }
    });
  }
  };
});

我也尝试过ng-switch，但也没有运气：

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>',

Answer 1

这里有几个问题......

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>',

3）value需要传递给指令......

<select-switch my-model='value'></select-switch>

Updated Plunker

Answer 2

由于@Anthony已经指出由于使用了ng-if如果创建了新的子范围，所以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>',

Plunkr

从Select选择切换到输入的指令 - 注意不要触发

2 个答案: