未設置角度指令的默認ngModel

-1

我有這個自定義指令的角度看起來像這樣:(爲簡潔起見，刪除了大部分代碼）。未設置角度指令的默認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而不是默認文本。

來源

2015-09-12 Asad Palekar

無的隔離範圍屬性在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/

來源

2015-09-12 17:25:20

未設置角度指令的默認ngModel

回答

相關問題