AngularJS directive - passing a function as an argument to the "&" attribute
I know angular directive
very deeply and I am trying to do something very simple and I think it is not supported in angular.
I am trying to pass a function as an argument for a highlighted scope (type &
).
I just want to deliver the values of the " @
" scope to a function implemented in my controller.
It seems impossible to assign &
arguments to the scope attribute .
<div ng-app="MyApp">
<div ng-controller="MyController">
<testkeyvalue accept="blabla" key='keyA' value='valueA' />
</div>
</div>
var myApp = angular.module('MyApp', [])
myApp.directive('testkeyvalue', function ()
{
return {
restrict: 'E',
replace: true,
scope: {
key: '@',
value: '@',
accept: "&"
},
template: '<div><label class="control-label">{{key}}</label><br/>' +
'<label class="control-label">{{value}}</label>' ,
link: function (scope, element, attrs)
{
var arr = ["key", "value", "accept"];
for (var i = 0, cnt = arr.length; i < arr.length; i++)
{
scope.$watch(arr[i], function ()
{
cnt--;
if (cnt <= 0)
{
fireaccept()
}
});
}
var fireaccept = function ()
{
//This is the problem
//I can't deliver this arguments to the "blabla" function im my controller
scope.accept(scope.key, scope.value);
}
}
};
});
myApp.controller('MyController', function ($scope, $window)
{
$scope.blabla = function (key, val)
{
$window.alert("key:" + key + " val: " + val);
};
});
Here is a complete demo: http://jsfiddle.net/chezih/y85Ft/401/
I read this question: AngularJS: How to pass arguments / functions to a directive? But that's not what I'm looking for, I just want to register the controller so that the event is called from within the directive (and the event can pass arguments).
Is there a way to do this?
source to share
it works like this:
http://jsfiddle.net/Pascalz/hr8zua7q/
<div ng-app="MyApp">
<div ng-controller="MyController">
<testkeyvalue accept="blabla(key, val)" key='keyA' value='valueA' />
</div>
</div>
var myApp = angular.module('MyApp', [])
myApp.directive('testkeyvalue', function ()
{
return {
restrict: 'E',
replace: true,
scope: {
key: '@',
value: '@',
accept: "&"
},
template: '<div><label class="control-label">{{key}}</label><br/>' +
'<label class="control-label">{{value}}</label>' ,
link: function (scope, element, attrs)
{
var arr = ["key", "value", "accept"];
for (var i = 0, cnt = arr.length; i < arr.length; i++)
{
scope.$watch(arr[i], function ()
{
cnt--;
if (cnt <= 0)
{
fireaccept()
}
});
}
var fireaccept = function ()
{
//This is the problem
//I can't deliver this arguments to the "blabla" function im my controller
scope.accept({key:scope.key, val:scope.value});
}
}
};
});
myApp.controller('MyController', function ($scope, $window)
{
$scope.blabla = function (key, val)
{
$window.alert("key:" + key + " val: " + val);
};
});
source to share
As Jussi Kosunen said in the comments, you can use the "=" operator instead of the "&" to access the function as a variable in the selection scope.
The minimum directive might look like this:
directive('exDir', function () {
return {
scope: {isolateScopeFunction: "=fun"},
template: '<button ng-click="isolateScopeFunction(\'inside isolateScope\')">press</button>'
};
});
and you will use it like this:
<div ex-dir fun="outerScopeFunctionName"></div>
source to share