I'm struggling to understand how to pass a function (delegate) to a directive in AngularJS and utilize it within the link-function. Any guidance or suggestions on the correct approach would be immensely appreciated.
Below is the controller code:
myApp.controller("QuestionCtrl", function($scope, $http) {
$scope.filter = function(query) {
console.log("filter filter", query);
};
$scope.replace = function(query, key) {
console.log('replace replace');
};
});
This is the markup being used:
<a class="Add Button" href="#" onsearch="filter(query)" onreplace="replace(hello, world)" showpane="#AddQuestionPane"><span>New question</span></a>
In the above code snippet, there are 2 attributes that reference functions on the scope which I aim to implement in my directive.
myApp.directive("searchreplace", function() {
return {
restrict: 'A',
scope: {
onsearch: "&",
onreplace: "&"
},
link: function(scope, element, attrs) {
element.bind("dblclick", function() {
scope.editMode = !scope.editMode;
if (scope.editMode) {
var replaceBox = angular.element('<input type="text" class="Search" placeholder="Replace" />');
replaceBox.keyup(function() {
// How can I invoke onsearch method? This is for testing purposes only.
scope.onsearch({ query: replaceBox.val() });
});
element.after(replaceBox);
} else {
element.siblings(".Search").remove();
}
});
}
};
});
I am currently struggling to determine how to correctly call the method on the scope as specified in the markup. Is this feasible?
Are there alternative solutions you would recommend for this scenario?