SORU
20 Mayıs 2013, PAZARTESİ


Açısal-uı özel olaylar hakkında ipuçlarını etkinleştir

Açısal-uı işlevselliği belirli bir alan geçersiz kullanıcı göstermek için bir ipucu kullanmaya çalışıyorum ama ipucu önceden tanımlanmış bazı tetikleyiciler sadece üzerinde gösterilebilir. Bu tetikleyiciler dışında araç ipucu, tetikleyici herhangi bir yolu var mı?

Örneğin:

<input
    type="text"
    tooltip="Invalid name!"
    tooltip-position="right"
    tooltip-trigger="myForm.username.$invalid">

CEVAP
20 Mayıs 2013, PAZARTESİ


İşte bir numara.

Twitter Bootstrap tooltips Açısal-UI dayanır () data-trigger="mouseenter" gibi ek bir öznitelik ile tetikleyici olay belirtmek için bir seçenek var. Bu tetiği çeken Program aracılığıyla (Açısal) değiştirmek için bir yol sağlar:

<input 
  ng-model="user.username"
  name="username"
  tooltip="Some text" 
  tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[myForm.username.$invalid]}}" 
/>

username tooltip-triggerifade 'mouseenter' olarak değerlendirir $geçersiz, zaman ve araç ipucu görünür. Aksi takdirde, tetiği karşılığında tooltip ateş etmez 'never' olarak değerlendirir.

DÜZENLEME:

@donanımını (yorum) modeli geçerli olsa bile tooltip takılıyor bir senaryo bahseder ve hiç bir yere gitmeyecek. Bu fare metin girilmiş ise giriş alanı üzerinde (ve modeli geçerli olur. ne olur. Model doğrulama doğru olarak değerlendirilen bitmez tooltip-triggergeçecektir "asla".

UI Önyükleme kullanır triggerMap fare/araç ipucu göstermek veya gizlemek için olayları belirleme çağrısında bulundu.

// Default hide triggers for each show trigger
var triggerMap = {
  'mouseenter': 'mouseleave',
  'click': 'click',
  'focus': 'blur'
};

Görüldüğü gibi, bu harita hiçbir şey bilmiyor "asla mümkün tooltip kapatmak için zaman belirlemek için" olay hakkında. Yani, sahada hile oyun güzel biz sadece güncelleme bu harita ile bizim kendi olay çifti ve UI Önyükleme sonra bilmem ne olayı gözlemlemek için kapanış ipucu tooltip-trigger ayarlamak için "asla".

app.config(['$tooltipProvider', function($tooltipProvider){
  $tooltipProvider.setTriggers({
    'mouseenter': 'mouseleave',
    'click': 'click',
    'focus': 'blur',
    'never': 'mouseleave' // <- This ensures the tooltip will go away on mouseleave
  });
}]);

PLUNKER

Not: sağlayıcı tarafından kullanıma $ipucu "uı.bootstrap."modül ve bizi küresel uygulama yapılandırma bizim ipuçlarını yapılandırmak için izin verir. tooltip

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Adam Washington

    Adam Washing

    12 Mayıs 2006
  • LounaTutorials

    LounaTutoria

    10 EYLÜL 2009
  • Rootjunky.com

    Rootjunky.co

    22 EKİM 2011