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

  • Jonathan Leack

    Jonathan Lea

    26 ŞUBAT 2007
  • Kayla Caton - Peet

    Kayla Caton

    23 HAZİRAN 2012
  • Migs351

    Migs351

    3 HAZİRAN 2007