Angularjs calling scope function in a directive - javascript

I'm trying to call a scope function from within a controller (which may or may not exist) from a directive. Calling fn() by itself, doesn't work because the fn() may not exist.
I've used scope.$apply('fn') which works, however I need to pass in parameters into the function, such as scope.$apply('fn(one, two)'); - this does not work.
Any suggestions how to call a function with parameters in a directive, that doesn't break if the controller has not yet defined the function?
Thanks!

Just call your function from a function like this :
scope.$apply(function(){
fn(one, two);
});

Related

How can you pass a function as an argument in AngularJS Emit?

I'm using the emit function in AngularJS and was wondering if it's possible to pass in a function as an argument.
Parent Controller:
$scope.$on("getChildFunction", function(event, func) {
console.log("function is...", func);
})
Child Controller:
$scope.$emit("getChildFunction", $scope.load_function());
However, when I use the web inspector func isn't returning at all. Are functions able to be passed up to the parent scope using emit?
If you want to pass the function itself, omit the parenthesis:
$scope.$emit("getChildFunction", $scope.load_function);
If you include the parenthesis - you'll execute the function and pass the result of the function.

How to specify execution order in (asynchronous) Angular/Javascript

I have a custom directive (this is just a simplified example). When the directive is clicked, a variable is updated and a function is executed. Both the variable and the function is from the parent scope, accessed via two-way binding and method/behavior binding respectively.
In some cases the parent scope might overrule the directive and force the variable to be a different value than the one set by the directive.
My problem is that the function is called before the variable is updated, probably because the asynchronous behaviour. That means that the variable gets overwritten by the directive.
Is there some way to force the function to be called after the variable has been updated?
This is from the directive's link function:
element.bind('click', function(){
scope.val = 'someValue'; // This should alway be executed first
scope.directiveClicked(); // This should always be executed last
});
The variable and method are accessed like this:
scope: {
val: '=value',
directiveClicked: '&onDirectiveClick'
}
Turned out that it was not called in the wrong order after all, but somehow the updated value was not displayed/stored. Adding a scope.$apply() before notifying the parent function did the trick.
element.bind('click', function(){
scope.val = 'someValue';
scope.$apply();
scope.directiveClicked();
});

Creating an instance inside a handler function with parameter

I have this:
Ext.define('MyWindow',{stuff that uses param});
Ext.define('widget.panel',{
stuff
handlerFn: function (parameter) { //parameter comes from Ext.pass(this.handlerFn,parameter)
Ext.create('MyWindow',{param: parameter}).show();
}
stuff
});
The button and its handler are defined inside the initComponent of the panel. When I made this without using Ext.define on the window and directly hardcoding it in the handler instead everything worked fine. However now it says param is not defined. How to pass it correctly?
The handler has to be passed through Ext.pass(this.handlerFn, [parameter])
Also inside the Ext.define make sure you know what your scope is on every level and you will easily find the parameter on the 'window' level.

Javascript syntax confusion [beginner]?

I don't understand what view("") does in the following javascript method that is part of Model object:
addView: function(view) {
this.views.push(view);
view("");
}
view(object) method is not defined anywhere...
view(object) method is not defined anywhere
The function that view is referring to is passed as argument to addView. This is also called a callback. A callback is a function (A) that is passed to another function (B) and is supposed to be called by that function (B).
So somewhere, there might be code that looks like
obj.addView(function(v) {
// using anonymous function expressions is a pretty common way to define
// callbacks
});
or
function someFunctionName(v) {
// any function will do, no matter how it is defined
}
obj.addView(someFunctionName);
Functions are first class objects in JavaScript and can be passed around like any other values.
It looks like it's passing in a function called view. Then it calls the view function.
Functions are first class citizens in JavaScript and can be passed as parameters to other functions.
addView: function(view) {//view is a function itself that is passed into the current function.
this.views.push(view);
view("");
}
The call could be like this
someObj.addView(function(par1){alert("I am a function too")});
Assume you have function view , if you call the view function without passing parameter in view(), then it returns like undefined, In such case we need to initialise the passing parameter value from function view("")
function view(passedData){
alert (passedData);
}

model.on('change', function()) not working properly

I am using backboneJS model.on ('change:attribute',functionName(someParameter)) to listen to change in model's attribute and call a funcion with given parameter. But the problem I am facing is the function is being called initially even when there is no change in the model. After that,even when the model changes, the function is not called. I did some trials and found out that without the parameter, if I called ('change:attribute',functionName),
the events fired properly. I can not understand what the problem is. Can anyone help as I think I am missing something very basic here. And a way to approach such problem would be much appreciated. Thanks.
The .on() method expects you to pass the callback function or method that will be called to handle the event. But in your first example you tried to pass a result of that callback.
So inside it will execute yourCallback.call(...) or yourCallback.apply(...). Obviously it could not execute the .call() method of non-function value.
But you can wrap the method call in anonymous function though if you really need it. For example if you need to use that someParameter value:
var MyView = Backbone.View.extend({
// ...
myMethod: function(someParameter) {
this.model.on('change:attribute', function() {
functionName(someParameter);
});
}
});

Categories

Resources