AngularJS - funkcia prechodu na direktívu - angularjs

Mám príklad 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>

Chcem, keď kliknem na tlačidlo, objaví sa výstražné pole, ale nič sa nezobrazí.

Môže mi niekto pomôcť?

odpovede:

222 pre odpoveď č. 1

Na volanie funkcie radiča v nadradenom rozsahu z vnútra smernice o izolácii rozsahu použite dash-separated názvy atribútov v HTML, ako uviedol OP.

Ak chcete do svojej funkcie poslať parameter, zavolajte funkciu odovzdaním objektu:

<test color1="color1" update-fn="updateFn(msg)"></test>

JS

var app = angular.module("dr", []);

app.controller("testCtrl", function($scope) {
$scope.color1 = "color";
$scope.updateFn = function(msg) {
alert(msg);
}
});

app.directive("test", function() {
return {
restrict: "E",
scope: {
color1: "=",
updateFn: "&"
},
// object is passed while making the call
template: "<button ng-click="updateFn({msg : "Hello World!"})">
Click</button>",
replace: true,
link: function(scope, elm, attrs) {
}
}
});

husle

---

139 pre odpoveď № 2

Možno mi niečo chýba, ale aj keď ostatné riešenia nazývajú funkcia nadradeného rozsahu, neexistuje možnosť odovzdať argumenty z direktívneho kódu, je to preto, že update-fn volá updateFn() s pevnými parametrami, napr {msg: "Hello World"}, Malá zmena umožňuje smernici prijať argumenty, ktoré by podľa môjho názoru boli oveľa užitočnejšie.

<test color1="color1" update-fn="updateFn"></test>

Všimnite si, že HTML prechádza funkčným odkazom, t. J. Bez () zátvorky.

JS

var app = angular.module("dr", []);

app.controller("testCtrl", function($scope) {
$scope.color1 = "color";
$scope.updateFn = function(msg) {
alert(msg);
}
});

app.directive("test", function() {
return {
restrict: "E",
scope: {
color1: "=",
updateFn: "&"
},
// object is passed while making the call
template: "<button ng-click="callUpdate()">
Click</button>",
replace: true,
link: function(scope, elm, attrs) {
scope.callUpdate = function() {
scope.updateFn()("Directive Args");
}
}
}
});

Takže vo vyššie uvedenom texte HTML volá miestny rozsah callUpdate Funkcia, ktorá potom „načíta“ updateFn z nadradeného rozsahu a volá vrátenú funkciu s parametrami, ktoré môže smernica vygenerovať.

http://jsfiddle.net/mygknek2/

---

36 pre odpoveď č. 3

Vo vašej „testovacej“ direktíve Html je názov atribútu funkcie nemal by byť na ťave, ale na báze pomlčiek.

tak - namiesto:

<test color1="color1" updateFn="updateFn()"></test>

píšu:

<test color1="color1" update-fn="updateFn()"></test>

Toto je uhlový spôsob, ako zistiť rozdiel medzi atribútmi direktívy (ako je napríklad update-fn function) a funkciami.

---

3 pre odpoveď č. 4

Ako je to s prechodom funkcie regulátora pomocou obojsmerná väzba? Potom ju môžete v smernici použiť rovnako ako v bežnej šablóne (kvôli jednoduchosti som odstránil irelevantné časti):

<div ng-controller="testCtrl">

<!-- pass the function with no arguments -->
<test color1="color1" update-fn="updateFn"></test>
</div>

<script>
angular.module("dr", [])
.controller("testCtrl", function($scope) {
$scope.updateFn = function(msg) {
alert(msg);
}
})
.directive("test", function() {
return {
scope: {
updateFn: "=" // "=" bidirectional binding
},
template: "<button ng-click="updateFn(1337)">Click</button>"
}
});
</script>

Pristál som na túto otázku, pretože som vyskúšal vyššie uvedenú metódu, ale nejako to nefungovalo. Teraz to funguje perfektne.

---

2 pre odpoveď № 5

pre pomenovanie atribútu používajte pomlčku a malé písmená (podobne ako iné uvedené odpovede):

 <test color1="color1" update-fn="updateFn()"></test>

A v rozsahu smernice použite „=“ namiesto „&“:

 scope: { updateFn: "="}

Potom môžete použiť updateFn ako každú inú funkciu:

 <button ng-click="updateFn()">Click</button>

Nech sa páči!

---

0 pre odpoveď č. 6

Musel som použiť väzbu „=“ namiesto „&“, pretože to nefungovalo. Podivné správanie.

---