Mam przykład angularJS
<div ng-controller="testCtrl">
<test color1="color1" updateFn="updateFn()"></test>
</div>
<script>
angular.module('dr', [])
.controller("testCtrl", function($scope) {
$scope.color1 = "color";
$scope.updateFn = function() {
alert('123');
}
})
.directive('test', function() {
return {
restrict: 'E',
scope: {color1: '=',
updateFn: '&'},
template: "<button ng-click='updateFn()'>Click</button>",
replace: true,
link: function(scope, elm, attrs) {
}
}
});
</script>
</body>
</html>
Chcę, aby po kliknięciu przycisku pojawiło się okno alertu, ale nic się nie pokazuje.
Czy ktoś może mi pomóc?
replace
Atrybut została zaniechana w angularjs: stackoverflow.com/questions/24194972/...updateFn({msg: 'my message'});
musi być użyte w tym formacie podczas wywoływania funkcji wewnątrz funkcji dyrektywylink
.Być może czegoś mi brakuje, ale chociaż inne rozwiązania wywołują funkcję zakresu nadrzędnego, nie ma możliwości przekazywania argumentów z kodu dyrektywy, dzieje się tak dlatego, że
update-fn
wywołujeupdateFn()
ze stałymi parametrami, na przykład{msg: "Hello World"}
. Niewielka zmiana pozwala dyrektywie na przekazywanie argumentów, co moim zdaniem jest o wiele bardziej przydatne.Zauważ, że kod HTML przekazuje odwołanie do funkcji, tj. Bez
()
nawiasów.JS
Tak więc w powyższym HTML wywołuje
callUpdate
funkcję lokalnego zakresu , która następnie „pobiera” updateFn z zakresu nadrzędnego i wywołuje zwróconą funkcję z parametrami, które może wygenerować dyrektywa.http://jsfiddle.net/mygknek2/
źródło
ng-click="updateFn()('Directive Args')"
W tagu Html z dyrektywą „test” nazwa atrybutu funkcji nie powinna być wartością typu camelCased, ale oparta na myślniku.
so - zamiast:
pisać:
Jest to kątowy sposób na określenie różnicy między atrybutami dyrektywy (takimi jak funkcja update-fn) a funkcjami.
źródło
Co powiesz na przekazanie funkcji kontrolera z powiązaniem dwukierunkowym ? Następnie możesz go użyć w dyrektywie dokładnie tak samo, jak w zwykłym szablonie (dla uproszczenia usunąłem nieistotne części):
Wylądowałem na tym pytaniu, ponieważ wypróbowałem powyższą metodę befire, ale jakoś nie zadziałała. Teraz działa idealnie.
źródło
użyj myślnika i małych liter dla nazwy atrybutu (jak powiedziano w innych odpowiedziach):
I użyj „=” zamiast „&” w zakresie dyrektywy:
Następnie możesz użyć updateFn jak każdej innej funkcji:
Proszę bardzo!
źródło
update-fn="updateFn"
Musiałem użyć wiązania „=” zamiast „&”, ponieważ to nie działało. Dziwne zachowanie.
źródło
update-fn="updateFn()"
, musisz dołączyć nawias (i być może parametry). Przekazywanie go jako odniesienia do funkcjiupdate-fn="updateFn"
nie zadziała z&
wiązaniem@JorgeGRC Dzięki za odpowiedź. Jedna rzecz, jednak część „może” jest bardzo ważna. Jeśli masz parametr (y), musisz uwzględnić je / je również w swoim szablonie i upewnij się, że określisz swoje lokalne ustawienia, np
updateFn({msg: "Directive Args"}
.źródło