Angular-Ui Bootstrap DatePicker打開焦點

儘管這看起來像一個簡單的問題，但我找不到任何解決方案。Angular-Ui Bootstrap DatePicker打開焦點

就算這樣簡單：

<input type="text" datepicker-popup>

我想，當光標進入，日曆彈出自動顯示，如jQuery UI的日期選擇器。現在我必須提供一個按鈕或者Alt-down，這對我來說都不友好。

有一個is-open屬性，但我不想將變量放在作用域中的東西可能已經可用作爲配置？：d。

感謝

來源

2015-08-25 Kat Lim Ruiz

編輯：

我終於找到了解決辦法。這有點棘手，但它的工作原理。這裏是指令：

app.directive("autoOpen", ["$parse", function($parse) { 
    return { 
    link: function(scope, iElement, iAttrs) { 
     var isolatedScope = iElement.isolateScope(); 
     iElement.on("focus", function() { 
     isolatedScope.$apply(function() { 
      $parse("isOpen").assign(isolatedScope, "true"); 
     }); 
     }); 
    } 
    }; 
}]);

這是視圖：

<input type="text" datepicker-popup="" ng-model="ctrl.dt" auto-open />

這是上了年紀的解決方案：

你可以寫一個指令，當輸入重點改變的is-open值：

app.directive("autoOpen", ["$parse", function($parse) { 
    return { 
    link: function(scope, iElement, iAttrs) { 
     var isOpenVarName = iAttrs.isOpen; 
     iElement.on("focus", function() { 
     $scope.$apply(function() { 
      $parse(isOpenVarName).assign(scope, "true"); 
     }); 
     }); 
    } 
    }; 
}]);

和他再次是認爲：

<input type="text" datepicker-popup="" auto-open is-open="open" ng-model="ctrl.dt" />

需要注意的是，你有你的控制器來定義open並將is-open="open"輸入元素。我知道這不是最好的解決方案。一旦找到更好的解決方案，我會盡快好轉。

更新：由於@Akos-lukacs在評論中提到，當以角度方式禁用調試數據時，此解決方案不起作用。

來源

2015-08-25 09:39:58 alisabzevari

我會試試看，謝謝！ ...一個缺點是你在範圍內放置了一個「打開」標誌，它應該是UI中可用的每個dtp的數組，因此每個標誌都有自己的標誌。 –

@KatLimRuiz你是對的。我找不到理想的解決方案，但做得更好！ – alisabzevari

事實上，如果你禁用調試數據，https://docs.angularjs.org/guide/production#disabling-debug-data'element.scope（）'和'element.isolateScope（）'停止在「生產」。就我而言，剛剛返回'undefined'。 –

alisabzevari的答案似乎沒什麼問題，但你可能會更好只是這樣做：

ng-focus='open = true'

我掙扎着換我圍繞如何準確is-open作品的頭，但我最終只是做一個包裝指令，做所有我datepickers典型的設置，並建立了is-open狀態的單獨範圍：

app.directive('datepickerAuto', function() { 
    return { 
     require: ['ngModel'], 
     restrict: 'E', 
     template: '<input class="input form-control" datepicker-popup="MM/dd/yyyy" show-weeks="false"' + 
      ' is-open="autoIsOpen" ng-focus="autoIsOpen = true" ng-click="autoIsOpen = true"' 
      +' type="text" ng-model="ngModel" ng-model-options="{\'updateOn\': \'blur\'}"/>', 
     link: function(scope) { 
      scope.autoIsOpen = false; 
     }, 
     scope: { 
      ngModel: '=' 
     } 
    }; 
});

所有我需要做的，現在是這樣的：

<datepicker-auto ng-model="someDate"></datepicker-auto>

來源

2015-11-07 22:13:51 nealibob

Angular-Ui Bootstrap DatePicker打開焦點

回答

相關問題