7

Ich habe viele dieser Fragen gesehen, aber habe keine Lösung gefunden, die funktioniert. Hier ist eine Geige, die nicht funktioniert, aber sollte.Argumente von Direktive zu Controller-Funktion übergeben

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

Controller:

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

Richtlinie:

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> 

Ich baue ein Array in meiner Richtlinie, die benutzerdefinierten ha benötigt schlingern in der Steuerung des übergeordneten Bereichs. Ich weiß, dass ich eine Uhr im Elternbereich auf ein Modell werfen kann, das ich in meine Direktive einfüge, aber das scheint hackisch und dreckig zu sein. irgendwelche Vorschläge?

Antwort

12

Bevor Sie Ihre Frage zu beantworten muss ich sagen, dass Ihr Skript ein paar Fehler enthält:

  1. Sie verbindlich die Eingabe einer Variablen textToPush, und dann mit einem anderen eine in der pushText Funktion (pushText) genannt ;
  2. Sie setzen die ng-click Direktive nicht korrekt; Es sollte ng-click="pushText()" statt ng-click="pushText" sein. Das Gleiche gilt für finish;

Jetzt zurück zu Ihrer Frage. Um eine Funktion des übergeordneten Bereich nennen Argumente zu übergeben, können Sie einen Verweis auf diese Funktion erhalten zuerst, und dann auszuführen:

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

Hier ist ein working version des Skripts.

Sie könnten dies auch tun, wenn Sie es vorziehen:

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

Aber für diesen Code zu arbeiten, sollten Sie Ihr Markup ändern:

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

another jsFiddle hier oben die Lösung zeigt.