Wir verwenden Angular 1.4.2 und ich versuche, einen Zählwert aus einer Direktive mit ng-Klick zu nehmen, übergeben Sie es an eine Funktion, und übergeben Sie es dann an den übergeordneten Controller. Nach einiger Anstrengung funktioniert es in einem Plunker, aber leider, als ich versuchte, diese Funktionalität zurück in den Hauptcode zu verschieben, bin ich nicht in der Lage, einen Controller zu bekommen, um an den isolierten Bereich zu binden.Wie bindet man ng-click an eine benutzerdefinierte Anweisung und ruft eine Elternfunktion auf?
Sollte einfach sein, aber ich habe versucht, den aktuellen Controller in die Direktive injizieren und versuchen, einen neuen Controller zu erstellen, aber nichts passiert, wenn ich auf die Schaltfläche klicken. Hier
ist der Code:
TEMPLATE:
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="app" ng-app="app">
<div ng-controller="mainCtrl">
<my-directive ctrl-fn="ctrlFn(count = count + 10)"></my-directive>
</div>
</div>
</body>
</html>
SCRIPT:
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope){
$scope.count = 0;
$scope.ctrlFn = function() {
console.log('In mainCtrl ctrlFn!');
//$scope.count += 10; Old hardcoded value.
console.log("count is: " + JSON.stringify($scope.count));
//Call service here
};
});
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
'ctrlFn' : '&'
},
template: "<div><button ng-click='ctrlFn()'>Click Here</button></div>",
link: function(scope, element, attributes) {
scope.ctrlFn(count);
}
};
});
Hier ist der Template-Code Ich versuche, in dem Haupt-Code zu ändern Basis:
<div>
<div layout="row">
<results-loader ctrl-fn="ctrlFn(count = count + 10)"></results-loader>
<md-button class="md-raised md-primary md-button" ng-click="ctrlFn()" flex>Click Me</md-button>
</div>
</div>
und hier ist, wo ich einen vorhandenen Controller in meiner Direktive als Eltern-Controller verwenden. Es ist in einer Route definiert und nicht in ng-controller und wird bereits für diese Ansicht verwendet.
aber es ist offenbar nicht ordnungsgemäß gebunden, wie ich nie die Richtlinie oder diese Funktion mit ng-klicken.
Wie gesagt, ich habe versucht, einen neuen Controller zu der Vorlage hinzuzufügen, dann habe ich versucht, einen vorhandenen Controller in die Richtlinie zu injizieren, aber keiner von beiden hat funktioniert. Ich nahm die Vorlage aus der Direktive heraus und versuchte, den ng-Klick mit ctrl-fn direkt in die Vorlage zu setzen, aber ich war mir nicht sicher, wie ich den Klick mit dem Aufruf des ctrl-fn-Attributs der Direktive verbinden sollte beide in der Vorlage? Die Idee hier ist, die Vorlage in eine eigene HTML-Datei zu verschieben und sie von der Direktive aus zu referenzieren, wie in: template: "myFile.html. Ich versuche so viel wie möglich zu entkapseln, um dies in eine wiederverwendbare Komponente zu verwandeln.
habe ich mit benutzerdefinierten Richtlinien nicht viel gearbeitet.
Hier ist der Link zu den plunker ist.
Ich brauche die Anzahl jedes Mal, wenn der Benutzer auf eine Schaltfläche klickt, um eine festgelegte Anzahl von Ergebnissen zurückzugeben. Wenn es die Seite lädt, zeigt es 10 Ergebnisse, wenn sie klicken, zeigt es diese 10 + 10 mehr, wenn der Klick wieder 10 + 10 + 10 oder 30 zeigt. Ich rufe einen Dienst an, um die Ergebnisse zu ziehen, nachdem ich den Wert übergeben habe an den übergeordneten Controller. –