I checked the existing similar questions in SO but I think it is bit different. I am aware we don't need to use JavaScript along with Angular. But due to some dependencies, I am using it.
var ProfileApp = angular.module('ProfileApp', []);
ProfileApp.controller('getprofile', function($scope,$http,$location){
$scope.searchok = 1;
$scope.tn_id = '5';
-- Some Angular Codes are here ---
I want to put $scope.tn_id value to JavaScript variable. I tried to like this.
<script type="text/javascript">
var tn_id_from_angular;
</script>
Defined the variable before Angular code. Added below code inside Angular code like this.
tn_id_from_angular = $scope.tn_id;
alert (tn_id_from_angular);
When I run the code I am getting the alert box but it is not showing the value and giving me error undefined.
Edit
In simple words, I want to assign $scope.tn_id value to javascript variable tn_id_from_angular.
you can assign a global variable to the window object, and then retrieve it
warning: this is hacky territory.. we are not making good code here, but it might work
try this in your angular code:
// ...
var ProfileApp = angular.module('ProfileApp', []);
ProfileApp.controller('getprofile', function($scope,$http,$location){
$scope.searchok = 1;
$scope.tn_id = '5';
window.hacks = {tn_id_from_angular: $scope.tn_id};
// ...
and then this in your script:
const {tn_id_from_angular} = window.hacks;
alert (tn_id_from_angular);
so long as the script executes after the angular code does -- it should work
if it doesn't, then you need to figure out some kind of "angular ready callback"
Related
I'd like to create a JS plugin (with ES6) so that it can be called from an HTML file, like this:
<div id="emails-box"></div>
<script src="emails-box.js"></script>
<script>
const container = document.querySelector('#emails-box')
EmailsBox({container, ...options})
//some code
</script>
and it can be used independently.
What the EmailsBox will do is to take the container and add a children div with a box to store a bunch of emails.
I've tried to do this for 2-3 days, but everytime I try to load the .js file, I get a:
EmailsBox is not defined
I'm getting desperate. Could you someone give me some light? Thanks!
EDIT: In my emails-box.js file, I could have something like this:
var EmailsBox = function(obj){
console.log("EmailsBox called")
// some code
return true;
}
Worked fine for me. Make sure that emails-box.js is in the same folder as index.html and the name matches the one you're linking to. working setup
Most likely the file path of your .js file is referenced wrong. So first make sure that you referenced file right. If it is, then try to define function like don't assign it to variable, it might not be defined on load page.
function EmailsBox(obj){
// some code
}
And if you really need it assigned to variable try using ready function.
var EmailsBox = function(obj){
console.log("EmailsBox called")
// some code
return true;
}
<script>
(function() {
EmailsBox({container, ...options})
})();
</script>
When calling the function, make sure options variable is defined.
So that instead of calling:
EmailsBox({container, ...options});//when options is not defined,
define options first and then call the EmailsBox function like so:
var options = 'hello'; //for example
EmailsBox({container, ...options});
If your emails-box.js file is properly referenced, it should work just fine.
There is a good chance that the problem with your source but if its because its not loading which would be weird then try using js to load the script if this doesn't work its wrong for sure and you should check it is right
var source = 'source here to script file';
var script = document.createElement('script');
script.onload = function () {
//what you want to do with this script
};
script.src = source();
document.head.appendChild(script);
I made a page I need to have in different instances. In short it is used to fill in different parts of a script and then display said script on the page for the user to copy it.
This script below handles the main part of the job, getting a field from HTML and then i can call the result in html to be displayed.
var urlField = document.getElementById('urlField').value;
var resultUrl = document.getElementById('resultUrl');
resultUrl.textContent = urlField;
Problem: there are different fields, eg. url, startdate, enddate, adschedule, etc. so I would like to have a reusable script that just says get the respective field and result the value which is assigned to it in html.
Can I do this somehow? I was researching the function "this" in javascript, but it is too complicated for my current knowledge. Bear in mind that I am in only a very basic level.
You can find the whole codepen to understand the issue better here: https://codepen.io/kmb5/pen/GxZbZq
Add parameters to your re-usable function and then call it whenever you need to use it. Use javascript to get the required data and pass it in as parameters.
reusable.js:
function myFuncWithParameters(parm1, parm2, parm3){
}
Alternatively:
function myFuncWithParameters(myObject){
//access properties from the object: myObject.parm1, myObject.parm2, myObject.parm3
}
Using the object route might make it easier since the order of the properties will not matter like parameters. Regardless of either method you will have to validate the input.
In your html pages, you will need some More JavaScript and HTML to bring in the JS and call it.
<html>
<head>
<title>my page</title>
<script scr="path to reusable js"></script>
<script src="path to this path's js"></script>
</head>
<body>
my page
</body>
</html>
If you look at the script tags, by importing the reusable js you can use it in javascript that was written / imported further down into the page.
In order to ensure you have access to an imported function, you can check if the function you need is defined:
if(typeof(myFuncWithParameters) !== 'undefined' && typeof(myFuncWithParameters) == typeof(Function){
//myFuncWithParameters will definitely be defined and is a function, if we get in here
}else{
//myFuncWithParameters is not defined and/or is not a function
}
In your html page to call the re-usable function...
var parm1 = value;
var parm2 = value;
var parm3 = value;
myFuncWithParameters(parm1, parm2, parm3);
In you decide to use the object:
var myObject = {
'parm1' : 4,
'parm2' : 6
}
//myObject.parm1 == 4
myFuncWithParameters(myObject);
I wrote this code but it doesn't work
<script type = "text/javascript">
var msg = {{msg.payload}}
</script>
this method consider the {{msg.payload}} value as an error due to the '{' in the syntax, I tried different ways, but nothing works, I guess I'm missing something that I don't understand, please I m open to any suggestion.
The Dashboard UI node uses Angular for it's templating so you need do things a little differently.
A good example can be found here but basically something like this:
<script>
//console.dir(scope) // this also works
//console.dir(scope.msg) // This doesn't because scope.msg doesn't yet exist
// Lambda function to access the Angular Scope
;(function(scope) {
//console.log('--- SCOPE ---')
//console.dir(scope) // this works but you only get it once (on startup)
//console.dir(scope.msg) // Doesn't work for because scope.msg doesn't yet exist
//Have to use $watch so we pick up new, incoming msg's
scope.$watch('msg.payload', function(newVal, oldVal) {
console.log('- Scope.msg -')
console.dir(scope.msg)
})
})(scope)
</script>
I'm trying to figure out how to programmatically insert a variable helper into a template using the Blaze API. I believe it needs to be done using some form of:
Blaze.render(Blaze.with('variable', contentFunction);
However, I'm struggling to get the contentFunction to work properly. I tried a function that returns a Session variable:
var session_var = function() {
return Session.get('myVariable');
};
However, I keep getting undefined errors. I know this could be done if I defined a separate template to be rendered, but that seems a bit much for this particular case. I was wondering if someone could explain how Blaze.with and Blaze.view work. Also, is it possible to programmatically insert just a variable helper into a template?
Without knowing exactly what you're trying to do, it's not clear if this is the easiest way of going about things.
However, if you look at the docs, you'll see that you can either supply the session variable in a data context and use Blaze.With, or supply no data context and use Blaze.View instead (which appears to be what you're going for).
So, if you want to render a reactive data context, it has to be supplied in the first argument to Blaze.With. Try something like this:
var myView = Blaze.With(
function() {
return {
foo: Session.get('foo')
};
},
function() {
return Spacebars.mustache([
'the value of foo is ',
this.lookup('foo')
]);
}
);
Blaze.render(myView, document.body); // or whatever element you want to render it inside
Alternatively, for Blaze.View:
var myView = Blaze.View(
function() {
return 'the value of foo is ' + Session.get('foo');
}
);
Blaze.render(myView, document.body);
To be honest, the easiest way to learn about the structure of renderable content (which is the difficult bit if you're doing this programmatically) is to study the stuff that the Spacebars compiler churns out. In other words, find an interesting template/sub-template that's been generated from quasi-HTML, pick an element out of it and run Blaze.getView([ELEMENT])._render, then study the result.
I have an internal script that has a array defined like so. It also has an external script which reads the data set in the "data" array. I made a mock-up of how I have things set-up, if this is no help I will provide a link to the actual page.
Internal Script:
<script type="text/javascript">
data = {
"id": "1",
"name": "joe"
}
</script>
External Script:
(function(window, document, undefined) {
find = {
postCount: function(){
var user = data.name;
}
};
find.postCount(); // If called here, data is undefined.
})(this, document);
Problem:
If I call the function anywhere but from the console it returns undefined.
I'm still fairly new to javascript so I'm probably making a stupid mistake or something, if you need anymore details let me know. Also, apologies for the quality of the post, it's my first time posting here.
Any help is appreciated, thanks.
shouldn't that be data = { ...?
You may be including the external javascript file before the script block declaring data. Doing this would mean that find.postCount(); is being called before data is declared. Calling it from the console would then work because at that point data is declared.
Note also that calling find.postCount(); shows as returning undefined in the console window when I call it (because the function declares the variable user but never actually returns anything.