7

Ho visto molte di queste domande ma non ho trovato una soluzione che funzioni. ecco un violino che non funziona ma dovrebbe.Passare argomenti dalla funzione direttiva a controller

http://jsfiddle.net/cdparmeter/j2K7N/2/

Controller:

$scope.foo = function (textArray) { 
    console.log(textArray) 
}; 

direttiva:

return { 
    restrict: 'E', 
    replace: 'true', 
    scope: { 
     methodToCall: '&method' 
    }, 
    template: "<div> 
     <input ng-model='textToPush'/> 
     <button ng-click='pushText'>Push</button> 
     <button ng-click='finish'>Finish</button> 
    </div>", 
    link: function (scope, element, attrs) { 
     scope.paragraphs = []; 
     scope.pushText = function() { 
      scope.paragraphs.push(scope.pushText); 
      scope.pushText = ""; 
     } 
     scope.finish = function() { 
      scope.methodToCall(scope.paragraphs) 
     } 
    } 
} 

HTML:

<div ng-app="MyApp"> 
    <div ng-controller="MyController"> 
     <container data-method="foo"> 
    </div> 
</div> 

Sto costruendo una matrice dentro la mia direttiva che ha bisogno personalizzato ettari ndling nel controller dell'ambito principale. So che posso lanciare un orologio nello scope genitore su un modello che ho inserito nella mia direttiva, ma sembra logico e sporco. eventuali suggerimenti?

risposta

12

Prima di rispondere alla tua domanda devo dire che lo script contiene alcuni errori:

  1. Stai vincolante l'ingresso ad una variabile chiamata textToPush, e quindi utilizzando una diversa all'interno della funzione pushText (pushText) ;
  2. Non si sta impostando la direttiva ng-click correttamente; dovrebbe essere ng-click="pushText()" anziché ng-click="pushText". Lo stesso per finish;

Ora, torna alla tua domanda. Al fine di richiamare una funzione del campo di applicazione genitore passaggio di argomenti, è possibile ottenere un riferimento a tale funzione prima, e poi eseguirlo:

scope.finish = function() { 
    var func = scope.methodToCall();     
    func(scope.paragraphs); 
} 

Ecco un working version dello script.

Si potrebbe anche fare questo, se si preferisce:

scope.finish = function() { 
    scope.methodToCall({value: scope.paragraphs});         
} 

Ma per questo codice per lavorare si dovrebbe cambiare il vostro codice a:

<container data-method="foo(value)"/> 

Ecco another jsFiddle mostra la soluzione di cui sopra.

Problemi correlati