Direttiva angolare: come impostare il binding bidirezionale con il modello ng

Ho scritto una direttiva per redactor (un editor wysiwyg). Funziona dopo un po 'di hacking ma mi piacerebbe trovare la strada giusta. La sfida principale per me è il legame bidirezionale tra il modello ng e il plugin jQuery di redactor. Ascolto keyup e comando evento dall'editor wysiwyg e aggiorno il modello. Guardo anche per il cambio di modello dall'esterno dell'editor redactor in modo da poter aggiornare di conseguenza l'editor di redactor. La parte delicata è la seguente: come posso ignorare il cambiamento del modello ng imposto dall'editor del reattore (dalla prima metà del binding)?Direttiva angolare: come impostare il binding bidirezionale con il modello ng

Nel seguente codice, memorizza l'ultimo valore che l'editor di redactor aggiorna sul modello e ignora la modifica del modello se il nuovo valore del modello è uguale a quest'ultimo valore. Non sono davvero sicuro se questo sia il modo giusto per raggiungere questo obiettivo. Mi sembra che questo sia un problema comune con l'associazione bidirezionale in Angular e che ci sia un modo a destra. Grazie!

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

directive.coffee (scusate la 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

fonte

2013-03-11 KailuoWang

Invece di $ guardare(), hai provato a implementare ngModel. $ Render()? Sembra che $ render() venga chiamato solo se qualcosa all'interno di Angular cambia il modello. In questo [fiddle] (http://jsfiddle.net/mrajcok/SKgVS/), $ render() viene chiamato solo quando clicco sul link (che cambia il modello in modo programmatico). (Dato che non ho una licenza Redactor, non posso testarlo.) –

Mark, ha funzionato per me. Grazie mille! – KailuoWang

Grande, felice ha funzionato, e grazie per averci fatto sapere. –

Mark Rajcok ha dato la soluzione (Grazie!) Il trucco è quello di utilizzare ngModel. Render $() invece di $ watch() .

uso

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

invece di

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

fonte

2013-03-11 18:23:29 KailuoWang

Il modello ng definito nel modello non si aggiorna usando questa direttiva? Hai idea del perché? –

Direttiva angolare: come impostare il binding bidirezionale con il modello ng

risposta

Problemi correlati