Callback-Funktion innerhalb Richtlinie attr in verschiedenen definierten attr

Question

So habe ich diese Richtlinie sagen genannt, mySave, es ist so ziemlich genau das

app.directive('mySave', function($http) { 
    return function(scope, element, attrs) { 
     element.bind("click", function() { 
      $http.post('/save', scope.data).success(returnedData) { 
       // callback defined on my utils service here 

       // user defined callback here, from my-save-callback perhaps? 
      } 
     }); 
    } 
}); 

das Element selbst für so aussieht

<button my-save my-save-callback="callbackFunctionInController()">save</button> 

callbackFunctionInController ist jetzt nur

$scope.callbackFunctionInController = function() { 
    alert("callback"); 
} 

wenn ich console.log()attrs.mySaveCallback innerhalb meiner-Speichern-Anweisung, gibt es nur eine Zeichenfolge callbackFunctionInController(), ich lese somewhere, dass ich $ dies analysieren sollte und es wäre in Ordnung, so versuchte ich $parse(attrs.mySaveCallback), die mir eine Funktion zurück gab, aber kaum die, die ich suchte für, gab es mir zurück

function (a,b){return m(a,b)} 

Was mache ich falsch? Ist dieser Ansatz von Anfang an fehlerhaft?

Answer 1

So scheint was wie der beste Weg, um den isolierten Umfang verwendet, wie durch ProLoser vorgeschlagen

app.directive('mySave', function($http) { 
    return { 
     scope: { 
     callback: '&mySaveCallback' 
     } 
     link: function(scope, element, attrs) { 
     element.on("click", function() { 
      $http.post('/save', scope.$parent.data).success(returnedData) { 
       // callback defined on my utils service here 

       scope.callback(); // fires alert 
      } 
     }); 
     } 
    } 
}); 

Für Parameter zurück zum Controller tut dies

[11:28] <revolunet> you have to send named parameters 
[11:28] <revolunet> eg my-attr="callback(a, b)" 
[11:29] <revolunet> in the directive: scope.callback({a:xxx, b:yyy}) 

Answer 2

Sie können .$eval verwenden, um eine Aussage in dem gegebenen Umfang

app.directive('mySave', function($http) { 
    return function(scope, element, attrs) { 
     $http.post('/save', scope.data).success(returnedData) { 
      // callback defined on my utils service here 

      // user defined callback here, from my-save-callback perhaps? 
      scope.$eval(attrs.mySaveCallback) 
     } 
    } 
}); 

TD auszuführen: Demo

Wenn Sie zwischen einer Richtlinie und einer Steuerung Sie den Zweiweg

Bindung verwenden können, um Daten teilen mögen

app.controller('AppController', function ($scope) { 
    $scope.callbackFunctionInController = function() { 
     console.log('do something') 
    }; 

    $scope.$watch('somedata', function(data) { 
     console.log('controller', data); 
    }, true); 
}); 

app.directive('mySave', function($http, $parse) { 
    return { 
    scope: { 
     data: '=mySaveData', 
     callback: '&mySaveCallback' //the callback 
    }, 
    link: function(scope, element, attrs) { 
     $http.get('data.json').success(function(data) { 
     console.log('data', data); 
     scope.data = data; 
     scope.callback(); //calling callback, this may not be required 
     }); 
    } 
    }; 
}); 

Demo: Fiddle

Answer 3

Es gibt viele Möglichkeiten, was Sie tun. Die erste Sache, die Sie wissen sollten, ist, dass die $http.post() aufgerufen wird, sobald das DOM-Element von der Vorlage-Engine gerendert wird, und das ist es. Wenn Sie es in eine Wiederholung einfügen, wird der Anruf für jedes neue Element im Repeater ausgeführt, also denke ich, dass dies definitiv nicht das ist, was Sie wollen. Und wenn es ist, dann entwerfen Sie wirklich Dinge nicht richtig, da die Existenz von DOM allein keine Abfragen an das Backend diktieren sollte.

Wie auch immer, direkt Ihre Frage zu beantworten; Wenn Sie die crappy Docs auf $ parse lesen, erhalten Sie einen Evaluationsausdruck. Wenn Sie diese Funktion ausführen, indem Sie den Gültigkeitsbereich an on übergeben, wird der aktuelle Status dieses Ausdrucks im übergebenen Gültigkeitsbereich zurückgegeben, dh Ihre Funktion wird ausgeführt.

var expression = $parse(attrs.mySave); 
results = expression($scope); // call on demand when needed 
expression.assign($scope, 'newValu'); // the major reason to leverage $parse, setting vals 

Ja, es ist ein wenig verwirrend auf den ersten, aber Sie müssen verstehen, dass ein $ Umfang ständig in asynchronen Anwendungen verändert und es ist alles über, wenn Sie den Wert bestimmt wollen, nicht nur, wie. $parse ist nützlicher für einen Verweis auf ein Modell, dem Sie einen Wert zuweisen und nicht nur lesen möchten.

Natürlich können Sie sich über das Erstellen eines isolieren Bereichs oder auf $eval() einen Ausdruck lesen.

$scope.$eval(attrs.mySave); 

Answer 4

vorbei

Das ist für mich gearbeitet

In der Ansicht Skript

Innerhalb der Richtlinie

$scope[attrs.mycallbackattrib](params....); 

Es ist richtig genannt und params sind vergangen, aber vielleicht ist kein beste ‚Winkel Art und Weise‘ zu arbeiten.

Answer 5

scope: { 
    callback: '&mySaveCallback' 
} 

den Umfang Einstellung explizit eine gute Lösung sein könnte, aber wenn Sie die Reichweite andere Teile des ursprünglichen Umfangs möchten, können Sie nicht, weil Sie haben es einfach überschrieben. Aus irgendeinem Grund musste ich auch andere Teile des Oszilloskops erreichen, also benutzte ich dieselbe Implementierung wie ng-click do.

Die Verwendung meiner Richtlinie in HTML:

<div my-data-table my-source="dataSource" refresh="refresh(data)">

Innerhalb der Richtlinie (ohne den Umfang ausdrücklich Einstellung):

var refreshHandler = $parse(attrs.refresh); 
    scope.$apply(function() { 
    refreshHandler({data : conditions}, scope, { $event: event }); 
}); 

Damit ich die Funktion in der Steuerung aufrufen können und Pass Parameter dazu.

In der Steuerung:

$scope.refresh= function(data){ 
    console.log(data); 
} 

Und es druckt die richtig heraus Bedingungen.

Answer 6

Sie sollten ng-click verwenden, anstatt eine eigene Direktive zu erstellen.

Answer 7

app.directive('mySave', function($http, $parse) { 
    return { 
    scope: { 
     data: '=mySaveData', 
     callback: '&' //the callback 
    }, 
    link: function(scope, element, attrs) { 
     $http.get('data.json').success(function(data) { 
     console.log('data', data); 
     if (scope.callback()) scope.callback().apply(data); 
     }); 
    } 
    }; 
});