未设置角度指令的默认ngModel

问题描述：

我有这个自定义指令的角度看起来像这样:(为简洁起见，删除了大部分代码）。未设置角度指令的默认ngModel

angular.module("SharedModule") 
    .directive('singleSelect', ['$ionicModal', singleSelect]); 

function singleSelect($ionicModal) { 
    return { 
     restrict: 'E', 
     require: 'ngModel', 
     replace:true, 
     template: [ 
      '<div class="item item-icon-right" ng-click="showItems($event)" >', 
      '{{text || headerText}}', 
      '<i class="icon ion-ios-arrow-right"></i>', 
      '</div>' 
     ].join("") 
     , 
     scope: { 
      items: "=", 
      headerText: "@" 
     }, 
     link: function (scope, element, attrs, ngModelController) { 

      if (ngModelController.$modelValue){ // i even tried $viewValue here 
       scope.selectedItemId = ngModelController.$modelValue.id; 
       scope.text = ngModelController.$modelValue.text; 
      } 
      scope.change = function (item) { 
       ngModelController.$setViewValue(item); 
       scope.text = ngModelController.$viewValue.text; 
       scope.close(); 
      }; 
     } 
    } 
}

我设置了NG-模式作为默认：

<single-select ng-model='defaultValue' header-text='text when no default present'>

，并在范围为defaultValue的值设置为{id:"1",label:"foo"}。

我希望我的模板在呈现我的指令模板时显示foo，但它没有显示。调试显示我的ngModel值设置为NaN。我相信我在这里错过了一些微不足道的东西。会是什么呢？

另外，我怎么能显示我的ngModel的label价值在模板中没有像我已经使用的text中间范围属性。

UDPATE：我已经创建了一个示例jsfiddle来很好地解释问题。我期望我的div在jsfiddle中显示foo而不是默认文本。

无的隔离范围属性在html中显示为属性。很难弄清楚你在这里做什么。建议您创建一个[plunker]（http://plnkr.co/edit/?p=catalogue）演示 – charlietfl

为了简洁，我已经删除了消耗'items'的代码。它所做的是为用户提供一个选项，用于从项目列表中选择一个值。 'change'函数正确设置了ngModel的值，因此我相信我的'items'绑定可以正常工作。它还更新模板中的我的“文本”值。我的问题在于指令初始化期间，我为ngModel设置了一个默认值。 –

@charlietfl：添加了jsfiddle。 –

答

如果更换你让你设置你的标题文字如下foo将出现header-text={{defaultValue.text}}并删除NG-模型，你可以使用角的默认templeting系统

我已经包含了完整的jsfiddle：http://jsfiddle.net/0Lpy7gff/

未设置角度指令的默认ngModel

相关推荐