Come chiamare l'azione di una direttiva personalizzata in AngularJS? - angularjs, kineticjs

In AngularJS puoi creare un pulsante per chiamare un'azione come questa:

<div ng-controller="myController">
<button ng-click="onButtonClicked()">Click me</button>
</div>

Quindi, sto inserendo una direttiva personalizzata come questa:

e in my-canvas.js funzione di collegamento del file di direttiva Sostituisco il tag con un file KineticJS tela. Quindi, l'utente manipola la tela trascinandola Kinetic forme e, infine, quando l'utente fa con le forme ciò che deve fare, voglio che la direttiva richiami un'azione definita su myController. Sto pensando a qualcosa del genere:

<div ng-controller="myController">
<my-canvas ng-success="onScenarioSuccess" />
</div>

ma non riesco a capire come farlo nel modo corretto.

Come posso fare in modo che una direttiva lo chiami a livello di programmazione di azione / evento?

risposte:

0 per risposta № 1

Quando si desidera che la direttiva esponga un'API per l'associazione a comportamenti, è necessario utilizzare un ambito isolato e utilizzare il & proprietà dell'ambito locale. Ciò consente di passare una funzione che la direttiva può invocare. Qui c'è un semplice esempio:

.directive("testDirective", function () {
return {
restrict: "E",
scope: {
action: "&"
},
template: "<button ng-click="action()">Test</button>"
};
});

E usalo come:

<test-directive action="myControllerFunction()"></test-directive>

Come da documentazione:

Il & binding consente a una direttiva di attivare la valutazionedi un espressione nel contesto dell'ambito originale, in un momento specifico. È consentita qualsiasi espressione legale, inclusa un'espressione che contiene una chiamata di funzione. A causa di ciò, & gli attacchi sono ideali per associare funzioni di callback a comportamenti direttive.

Ci sono "alcuni dettagli in più nel file documentazione.

---

0 per risposta № 2

Se vuoi esporre un evento personalizzato come ng-success e vuoi chiamare una funzione sull'evento. Puoi fare ciò che @Beyers ha menzionato usando un ambito isolato.

Oppure guarda il codice sorgente di ng-click, avvolge semplicemente l'evento javascript all'interno di $ scope.apply, utilizzando il $parse servizio per valutare l'espressione passatagli. Qualcosa di simile può essere aggiunto nella funzione di collegamento

var fn = $parse(attr["ngSuccess"]);
element.on("someEvent", function (event) {
var callback = function () {
fn(scope, {
$event: event
});
};
scope.$apply(callback);
});

Il vantaggio di questo meccanismo è che l'ambito isolato non viene creato.

---