Sending a JSON object using a function to another controller
I would like to send a JSON object with a function template from app.controller
to another controller. I decided to send this variable as an attribute of the element of the inner directive. The problem is that the object that is inside $attr.valueAtt
in my directive controller "[object Object]"
and I cannot get it:
My code:
var value = (
[{
functionLabel:'Fun',
functionTemplate: function(param1,param2){
alert(param1);
},
functionParams: ['PARAM1','PARAM2']
}]);
Then I add it to the controller as an attribute of the directive element:
angular.element(document.getElementById('space-for-modals'))
.append($compile("<modal-dialog visible='true' data-backdrop='static' valueAtt='"+value+"'></<modal-dialog>")($scope));
And try to get the "value" in my controller:
$scope.functions= $attrs.valueAtt;
But $scope.functions
there is only "[object Object]". Is there a way to send a function template from one controller to another so I can call it later?
source to share
The problem is that when valueAtt='"+value+"'
JavaScript is executed it converts value
to a string - "[object Object]"
. You need to keep your object in scope and then refer to it by name in the HTML attribute. Something like that:
var scope2 = scope.$new();
scope2.foo = [{
label:'Fun',
fn: function(param1, param2){
alert("Callback function says: " + param1)
},
params: ['PARAM1', 'PARAM2']
}];
angular.element(document.getElementById('space-for-modals'))
.append($compile("<modal-dialog visible='true' data-backdrop='static' value-att='foo'>Modal dialog</<modal-dialog>")(scope2));
Then, in your modal dialog function, you can dereference value-attr
to get foo
:
link: function(scope, elem, attrs) {
scope.functions = scope[attrs.valueAtt];
}
And in your dialog controller, you can access the element functions
. Note that this will not be ready until the communication function is called, so you need to use a clock:
$scope.$watch('functions', function(functions) {
if (functions == null)
return;
var ft = functions[0];
ft.fn.apply(null, ft.params);
});
I have to say, it's a little weird to compile HTML like this - why not just use a template in the directive declaration? If this is because you want to place content on a different level of your DOM, consider using a service to communicate with it (basically you are setting a field on a shared singleton). Alternatively, you can use Isolate Scope so that you don't bind this attribute yourself.
The service can store a callback function that your controller will run:
.service('modalService', [function() {
var proxy = function(message) {
proxy.callback(message);
};
proxy.callback = function() {};
return proxy;
}])
If you inject this into both your dialog and trigger controllers, you can communicate between them. The modal dialog should replace the callback with its own function. Here's another demo .
source to share
Okej I suspected there was a conversion problem, but in fact I cannot store the "value" in a static variable in the main $ scope because I would like to use it to call a modal with general functionality that depends on the functions stored in " value ", so I decided to assign" value "as an attribute. Is there any other way to store the "value" with functions in the view, or pass it directly to the directive controller?
source to share