I am trying to go back to the previous page using angularJS when browser back button is clicked as it is not happening by default. I have written the below code and it is throwing an error.
something() {
this.scope.$on("$locationChangeStart",function(){
this.scope.transferTo('dashboard')
//$window.history.back();
});
}
I am calling something function in $onInit.
Error:
TypeError: Cannot read property 'scope' of null (getting this error 4 times)
Classic this binding issue.
Replace function(){} with () => {} or assign this to a variable, like let self = this.
Related
I am working in ServiceNow and have a button that pulls up a modal window that renders an embedded form. When a user submits, I have the embedded form $broadcast 'closeModal', and the button receives it to close. My client script looks like this for the embedded form:
$rootScope.$broadcast('closeModal');
and on my button that brings up the modal, my client script looks like this:
$rootScope.$on('closeModal', function() {
c.modalInstance.close();
});
This actually does close the modal window, but my console is showing "TypeError: Cannot read property 'close' of undefined"
Any idea why this is showing up?
Additionally, in my screenshot above, that typeerror actually shows up twice, for two different widgets. I am broadcasting and retrieving the same event for both widgets. I'm not sure if that's against best practice, but I've tried changing one of them to 'closeModal2' for example and the same typeError still shows.
Any suggestions or advice is greatly appreciated!
-- ADDED --
This is a screenshot of my console after logging c:
Simple hack is :
$rootScope.$on('closeModal', function() {
c.modalInstance && c.modalInstance.close();
});
Another suggestion is use $rootScope.$emit and listen at specific scope level $scope.$on
I'm creating a simple web page where i display a button which execute this code
$window.open(link, "_self");
The link variable is a simple telegram link for a channel, but this is not the problem, the problem, as the question say itself, is about arguments variable in $window.open.
This in my opinion is strange because when i logged in the console $window.open function, i received this output:
function pbWindowOpen() {
lastBlockCaller = {
caller: arguments.callee.caller,
args: arguments.callee.caller.arguments
};
try {
return newWindowOpenFn.apply(this, argument…
At this point, should not i see an argument variable inside this function? How could i solve this problem?
Passing some arguments could resolve my problem? If yes, there's an answer about why i'm having arguments null?
I've also tried with window.open but nothing changes, always the same problem
That shouldn't happen if you are running your code in a browser (in other env you may have some initialized variable window representing something else), $window is a wrapper in top of var currWindow = $window.self || $window.window and then do a perform of callong open(...) function. Hence, you neither using the native javascript code badly in a angular context, and again that would be easily mock-ableif we mock $window and create a property call self or window inside it. So it will work in the application, and will also be testable.
My flowgraph uses jsPlumb to make the nodes draggable and later on allow for connections between nodes. However, even only with the dragging I am held up by an error.
Whenever I drag a node, the console logs an error message for each pixel moved. The error is jsPlumb function failed : TypeError: Cannot read property 'el' of undefined and I managed to track it down to be in jsplumb.js line 4919.
There, the local variable elId (which represents the id of the node's div) is set correctly to node-1. However, inside of the managedElements object the node is saved with the key node-{{$ctrl.node.id}}. Therefore, when attempting to access managedElements[elId].el (in line 4919), the (correct) elId is not found as a key, which prompts the error above.
I could not figure out when managedId is set. The controller that is part of the node .component has the following code (the JsPlump service simply returns a jsPlumbInstance):
const NodeController = ['$element', 'JsPlumb', function ($element, JsPlumb) {
const nodeDiv = $element.children('.node');
JsPlumb.draggable(nodeDiv);
}];
I also tried setting the draggable method when the template is fully linked (I'm new to AngularJS and was not sure whether the interpolation has taken place when the controller is called):
const NodeController = ['$element', 'JsPlumb', function ($element, JsPlumb) {
const ctrl = this;
ctrl.$postLink = function () {
const nodeDiv = $element.children('.node');
JsPlumb.draggable(nodeDiv);
};
}];
All of these snippets still produce an error in the console whenever a mouse move event is fired.
Do you have an idea of how I can resolve this bug? Can I somehow provide the correct id for the managedElements?
The problem was that $element did not interpolate the id and therefore an element with an invalid id was passed through to jsPlumb and got saved in managedElements.
Since I do not know how to access the interpolated element inside the controller, I manually reset the id on the element in the controller and then passed the element on to jsPlumb.
Refer to this code:
http://plnkr.co/edit/4QpPZZib6qGjhx85Do0M
Here's how to replicate the error:
1. Run the plnkr
2. then click on any of the buttons "200", "300" etc. You will notice that the model updates just fine. No issue so far
3. Now paste something in the input box. The paste should work just fine.
4. Now try clicking on any of the buttons.
ERROR:
You will notice that the values in the input box does not updates to model value.
From what I can understand the issue is with my $render function.. however I can't seem to find a fix for it.
scope.handlePaste = function(e) {
var pastedText = e.clipboardData.getData('text/plain');
ngModelController.$setViewValue(pastedText);
ngModelController.$render = function() {
element.html($sce.getTrustedHtml(ngModelController.$viewValue));
};
return false; //prevent the default handler from running
};
}
You're using ngSanitize but you forgot to include it in the plunker. (lib + injection in app and $sce in directive).
Then element is an angular element and doesn't have an html() function.
You can get the raw html element with element[0] which has a property value.
http://plnkr.co/edit/HSOnscaprbyvUwjr0P2l?p=preview
I am trying to get Google+ login button to work in my React code. The react code is as following (the actual code has proper value for CLIENT_ID).
React.DOM.div({className: "signin-with-google"},
React.DOM.span({id: "signinButton"},
React.DOM.span({
className: "g-signin",
'data-callback': this.signinCallback,
'data-clientid': "CLIENT_ID",
'data-cookiepolicy': "single_host_origin",
'data-scope': "https://www.googleapis.com/auth/userinfo.email"}
)
)
)
The button shows up properly on the page, clicking on it brings up the OAuth dialog and hitting Accept makes it disappear and no errors/warnings are generated either in the dialog or on the javascript console. So to the best of my knowledge everything is working as expected.
However, the callback method this.signinCallback that I am specifying doesn't get invoked. Any, ideas on what I am doing wrong here?
Thanks
As stated in the Google+ Sign-in Button docs, data-callback is expected to be "A function in the global namespace". That is because Google's code likely calls your callback by name since all HTML attributes are just strings. It will do something like (warning, not real code):
window[element.dataset["callbackName"]]();
You are passing a reference to your callback, which is not globally accessible. You can expose it when the component is mounted and delete it from the global namespace when it is unmounted:
componentWillMount: function() {
// Somehow generate a unique ID for every G+ button. This uses Underscore's
// `uniqueId` function[1].
//
// [1] http://underscorejs.org/#uniqueId
this.callbackName = _.uniqueId("gPlusCallback-");
window[this.callbackName] = this.signinCallback;
},
componentWillUnmount: function() {
delete window[this.callbackName];
},
render: function() {
...
'data-callback': this.callbackName
...
}