Köşeli Yönergesi - ng-modeliyle çift yönlü bağlamayı ayarlama

Redactor (bir wysiwyg editörü) için bir yönerge yazdım. Bazı korsanlıklardan sonra çalışıyor ama doğru yolu bulmak istiyorum. Benim için en büyük zorluk, ng modeli ve redatör jquery eklentisi arasındaki çift yönlü bağdır. Wysiwyg editöründen keyup ve command olayı dinlerim ve modeli güncellerim. Ayrıca redaktör editörünün dışından model değişikliği için izlerim, böylece redaktör editörünü buna göre güncelleyebilirim. Zor olan kısım şudur: Reaktör düzenleyicisinin (bağlayıcının ilk yarısından itibaren) uyguladığı ng modeli değişikliğini nasıl görmezden gelirim?Köşeli Yönergesi - ng-modeliyle çift yönlü bağlamayı ayarlama

Aşağıdaki kodda, redaktör editörünün modele güncellediği en son değeri hatırlar ve modelin yeni değeri bu son değere eşitse model değişikliğini dikkate almaz. Bunu başarmanın doğru yolu olup olmadığından emin değilim. Görünüşe göre bu, Açısal olarak çift yönlü bağlanma ile ilgili ortak bir sorundur ve sağ yolunda olmalıdır. Teşekkürler! (CoffeeScript için üzgün)

<textarea ui-redactor='{minHeight: 500}' ng-model='content'></textarea>

directive.coffee

angular.module("ui.directives").directive "uiRedactor", -> 

    require: "ngModel" 
    link: (scope, elm, attrs, ngModel) -> 
    redactor = null 
    updatedVal = null 

    updateModel = -> 
     ngModel.$setViewValue updatedVal = elm.val() 
     scope.$apply() 

    options = 
     execCommandCallback: updateModel 
     keydownCallback: updateModel 
     keyupCallback: updateModel 

    optionsInAttr = if attrs.uiRedactor then scope.$eval(attrs.uiRedactor) else {} 

    angular.extend options, optionsInAttr 

    setTimeout -> 
     redactor = elm.redactor options 

    #watch external model change 
    scope.$watch attrs.ngModel, (newVal) -> 
     if redactor? and updatedVal isnt newVal 
     redactor.setCode(ngModel.$viewValue or '') 
     updatedVal = newVal

kaynak

2013-03-11 KailuoWang

, sen ngModel uygulamaya çalıştık) (izle. $ Render()? Görünüşe göre, render() sadece Angular içindeki bir şey modeli değiştirdiğinde çağrılır. Bu [fiddle] 'da (http://jsfiddle.net/mrajcok/SKgVS/), $ render() sadece bağlantıyı tıklattığımda çağrılır (modelin programatik olarak değişir). (Bir redaksiyon lisansım olmadığı için bunu test edemem.) –

Mark, benim için çalıştı. Çok teşekkür ederim! – KailuoWang

Harika, işe yaradı ve bize bildirdiğiniz için teşekkürler. –

Mark Rajcok çözümünü verdi (Thank you!) Hüner ngModel kullanmaktır. $ (Oluşturma) yerine $ daha izlemek() .

kullanım

ngModel.$render = -> 
    redactor?.setCode(ngModel.$viewValue or '')

yerine yerine $ arasında

scope.$watch attrs.ngModel, (newVal) -> 
    if redactor? and updatedVal isnt newVal 
    redactor.setCode(ngModel.$viewValue or '') 
    updatedVal = newVal

kaynak

2013-03-11 18:23:29 KailuoWang

ng-model şablonda tanımlanan bu direktif kullanılarak güncellenmiyor mu? Neden olduğuna dair fikrin var mı? –

Köşeli Yönergesi - ng-modeliyle çift yönlü bağlamayı ayarlama

cevap

İlgili konular