Dyrektywa kątowa - jak ustawić dwukierunkowe wiązanie z ng-modelem

Napisałem dyrektywę dla redaktora (edytor WYSIWYG). Działa po hakowaniu, ale chciałbym znaleźć właściwą drogę. Głównym wyzwaniem dla mnie jest dwukierunkowe wiązanie między modelem ng a wtyczką jQuery redaktora. Słucham zdarzenia keyup i command z edytora WYSIWYG i aktualizuję model. Obserwuję również zmiany modelu spoza edytora redaktorów, dzięki czemu mogę odpowiednio zaktualizować edytor redaktorów. Najtrudniejsza część to: Jak zignorować zmianę modelu ng narzuconą przez edytor reaktora (od pierwszej połowy wiązania)?Dyrektywa kątowa - jak ustawić dwukierunkowe wiązanie z ng-modelem

W poniższym kodzie zapamiętuje ostatnią wartość, jaką edytor redaktora aktualizuje do modelu i ignoruje zmianę modelu, jeśli nowa wartość modelu jest równa ostatniej wartości. Naprawdę nie jestem pewien, czy to jest właściwy sposób, aby to osiągnąć. Wydaje mi się, że jest to powszechny problem z dwukierunkowym wiązaniem w Angular i musi być jakiś sposób. Dzięki!

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

directive.coffee (przepraszam za coffeescript)

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

Źródło

2013-03-11 KailuoWang

Zamiast oglądać $(), które próbowano wdrożyć ngModel. $ Render()? Wygląda na to, że $ render() zostanie wywołany tylko wtedy, gdy coś wewnątrz Angular zmieni model. W tym [skrzypce] (http://jsfiddle.net/mrajcok/SKgVS/), $ render() jest wywoływane tylko wtedy, gdy kliknę link (który programowo zmienia model). (Ponieważ nie mam licencji na redaktor, nie mogę tego przetestować.) –

Mark, to zadziałało. Dziękuję Ci bardzo! – KailuoWang

Wspaniale, cieszę się, że zadziałało i dziękuję za poinformowanie nas. –

Mark Rajcok dał rozwiązanie (Dziękujemy!) Sztuką jest wykorzystanie ngModel. $ Render() zamiast $ oglądać() .

użycie

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

zamiast

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

Źródło

2013-03-11 18:23:29 KailuoWang

ng-model zdefiniowany w szablonie nie aktualizuje się za pomocą tej dyrektywy? Masz jakiś pomysł, dlaczego? –

Dyrektywa kątowa - jak ustawić dwukierunkowe wiązanie z ng-modelem

Odpowiedz

Powiązane problemy