How to get angular variable to javascript when using scope() method - javascript

This is how I get my input. sql table -> php slim -> angularjs -> website.
I need to GET a variable in javascript that php slim is returning to angular.
Right now I'm using this in $( document ).ready(function() {.
var $element = $('div[ng-show="game"]');
var scope = angular.element($element).scope();
console.log(scope);
It returns this in console.
Any ideas how to achieve this?

In your Angular controller just create your JQuery method there.
//Controller
function someController($scope) {
$scope.game = GetFromSlim();
$scope.yourMethod = function(){
$('#someDiv').innerHtml($scope.game.total_rating);
}
}
Then you can just call your method from the view using angular.
//View
<div ng-controller="someController" ng-app>
<div id="someDiv"></div>
<button ng-click="yourMethod()">Just do it</button>
</div>

Angular 2 or AngularJS 2 ++
Without scope method also can be passed as below. You have to write somecodes inside angular page(Declare, define and redefine) and some in javascript.
A. In angular (i used in common angular page) write below code
//Declare and Define of variables
environmentStringify = {
'project_url':'172.23.77.82:4200/myangularproject/',
'testMode':true
};
declare var environmentStringify: any;
environmentStringify = JSON.stringify(environment);
B. in html page (i used index.html inside head and script tags) write below codes
<script type="text/javascript">
var environmentStringify = "{{environmentStringify}}";
var environment = null;
function isJsonString(str) {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
}
function setJSEnvironmentVariable(){
if(isJsonString(environmentStringify)){
environment = JSON.parse(environmentStringify);
} else {
setTimeout(function(){
setJSEnvironmentVariable();
}, 500);
}
}
setJSEnvironmentVariable();
</script>

Related

Bind to button function qlik js extension

I'm developing a simple js extension for Qlik sense and trying to create an extract button just like it provided in documentation
So I have two options one of them using angularjs and the second one jquery + js
First approach:
I've tried with angularjs:
html = "<div class='exportArea' style='float:right'><div id='exportText'></div><button ng-click=\"table.exportData({download:true})\">Create Excel file</button></div>" + html;
no success
Second Approach:
So I was using $element.find
$element.find("#exportButton").on("qv-activate", function(){}
But later have no idea how to call this export
var qTable = qlik.table(this);
var $exportButton = $( document.createElement('button'));
$exportButton.html('Export');
$exportButton.bind('click', function ( ) {
qTable.exportData({download: true});
});
$element.append($exportButton);
To summarize I need to call code from documentation using tag id='exportButton'
inside
html = "<div class='exportArea' style='float:right'><div id='exportText'></div><button id='exportButton'>Create Excel file</button></div>" + html;
Thank you in advance!!!
To your first approach:
You will need to define the table in the scope either in the Paint function like this:
paint: function ( ) {
// ...
if ( !this.$scope.table ) {
this.$scope.table = qlik.table(this);
}
}
or in the angular controller like this:
controller: ['$scope', function ($scope) {
$scope.table = qlik.table(this);
}]
To the second approach the $element references the Html Element to append the button to. So either you use this appended Button or you could use a selector function like getElementById (most likely not on the document but rather on the extensionContainer):
paint: function ($element, layout) {
$element.getElementById('exportButton').onlick=()=>{
qlik.table(this).exportData({download: true});
}
}

Materialize getInstance(elem) inside AngularJS component's controller

I'm trying to use the .open() method of materialize to open a modal component within AngularJS on the page load.
So my component file (loginModal.js) has the following code:
angular.module('my-app').component('loginModal', {
templateUrl:'app/components/templates/loginModal.html',
controller: loginModalController
})
function loginModalController()
{
angular.element(document).ready( function(){
var loginModal = document.querySelectorAll('.modal');
var loginModal_options = {};
var loginModal_instance = M.Modal.init( loginModal, loginModal_options);
console.log(loginModal_instance);
loginModal_instance.open();
var instance = M.Modal.getInstance(loginModal);
instance.open();
});
}
While the initialization is happening as expected when I'm trying to trigger the open method, through the loginModal_instance variable I'm getting
loginModal_instance.open is not a function
while through instance variable I'm getting
Cannot read property 'open' of undefined
Instead, If I'm going to use JQuery, its working
function loginModalController()
{
$(document).ready(function(){
$('.modal').modal();
$('#login-modal').modal('open');
});
}
Any ideas? Am I doing anything wrong?
Actually by using querySelector() instead of querySelectorAll() did the trick.

How do you access object properties from a nested polymer element?

I would like to access javascript object data from a custom polymer element nested inside a list. The host page has the following:
<core-list id="eventData">
<template>
<event-card event="{{model}}"></event-card>
</template>
</core-list>
With the following script:
<script type="text/javascript">
var data = [
// server side code to populate the data objects here
];
var theList = document.querySelector('core-list')
theList.data = data;
function navigate(event, detail, sender) {
window.location.href = '/events/show/?eventId=' + event.detail.data.id
}
theList.addEventListener("core-activate", navigate, false);
</script>
Inside event-card.html the following markup in the template achieves the desired result:
<core-toolbar>
<div class="title">{{event.title}}</div>
</core-toolbar>
<div class="responses">{{event.numResponses}} responses</div>
However when I run the following in the template script:
Polymer('event-card', {
ready: function() {
var eventDates = [];
var theEvent = this.getAttribute('event');
console.log(theEvent);
console.log(theEvent.proposedDate);
console.log(theEvent.possibleStartDate);
console.log(theEvent.possibleEndDate);
if (theEvent.proposedDate) {
eventDates[0] == theEvent.proposedDate;
} else {
if (theEvent.possibleStartDate && theEvent.possibleEndDate) {
var startDate = moment(theEvent.possibleStartDate);
var endDate = moment(theEvent.possibleEndDate);
var difference = endDate.diff(startDate, 'days');
for (i = 0; i < difference; i++) {
eventDates[i] = startDate.add(i, days);
}
}
}
console.log(eventDates);
this.dates = eventDates;
},
created: function() {
// hint that event is an object
this.event = {};
}
});
</script>
the log statements print
{{model}}
undefined
undefined
undefined
Array[0]
So I seem to be getting caught by the different ways that properties and attributes are evaluated in different contexts but I am not sure whether it is a bug in my code or even what approach to try next.
Because the "event" attribute is set by Polymer when the template is processed, the ready event handler is the wrong place to do your stuff (by the way, using Polymer you should consider using the "domReady" event handler).
Anyway, to get your scenario working, just add a "eventChanged" method to your Polymer component. Whenever an attribute changes (which is also the case when Polymer executes the template element) a "[propertyName]Changed(oldVal, newVal)" will be called (if existing) to signal the change to your component.
So implement this method and you're done.
One more caveat in your code : You should consider using "this.event" to access the attribute value (or as best solution the "newVal" parameter of your eventChanged(oldVal,newVal) method).
Why not using Polymer's attribution model from the get go?
<polymer-element attributes="event">
<script>
Polymer("event-card", {
ready: function() {
var theEvent = this.event;
}
});
</script>
</polymer-element>

jQuery parse object to a secondary function

I am trying to parse $(this) to a function called by another function but without much luck. Essentially my question is; is it possible and if so, how?
Code is as follows:
Initial Call
$('.playform').on('click', playForm);
Primary Function
function playForm(e){
...snip...
TweenLite.to($('.video'), 1, {css:{'height':win.h+'px'}, ease:Power4.easeInOut, onComplete:showForm});
...snip...
}
Secondary Function
function showForm{
$('.video #youtube').append('<iframe class="show-form" src="'+$('.playform').attr('href')+'"></iframe>');
}
As I am going to be using more than one form, I wanted to automate this process but I cant seem to
Things I have tried so far but to no avail
Declared $(this) as a variable
Tried to give the functions parameters
Step 1
$('.playform').on('click', function(){
var whichVid = $(this);
playForm(whichVid);
});
Step 2
function playForm(e){
TweenLite.to($('.video'), 1, {css:{'height':win.h+'px'}, ease:Power4.easeInOut, onComplete:showForm(e)});
}
Step 3
function showForm(e){
$('.video #youtube').append('<iframe class="show-form" src="'+e.attr('href')+'"></iframe>');
}
Alternatively you could establish a global variable before step 1 and then set the value on the click event like
var window.whichVid = '';
$('.playform').on('click', function(){
window.whichVid = $(this);
playForm();
});
function playForm(){
TweenLite.to($('.video'), 1, {css:{'height':win.h+'px'}, ease:Power4.easeInOut, onComplete:showForm()});
}
function showForm(){
var thisVid = whichVid.attr('href');
$('.video #youtube').append('<iframe class="show-form" src="'+ thisVid +'"></iframe>');
}
you could put it like this (not tested) :
(function($){
var global_this;
function palyform(e){
global_this = $(this)
...
}
function showform(e){
// do shomething with global_this
...
}
$('.playform').on('click', playForm);
}(jQuery);

Why cant my anchor fire this javascript object?

I have a page with a linked javascript object:
//the constructor function
function NewsScroller() {
}
//now put some config objects using the JSON structure
NewsScroller.prototype.config = {
serviceUrl : '/NewsProvider.svc/rest/GetNews/',
pageIndex : 0
}
//the argumented constuctor for this object
NewsScroller.prototype.init = function () {
this.getNews(this.config.pageIndex);
console.log(this.config.pageIndex);
}
NewsScroller.prototype.decreasePage = function () {
console.log('current page index ' + this.config.pageIndex);
}
Then I have the page ready declaration:
<script>
$(document).ready(function () {
var newsScrollerForPage = new NewsScroller();
newsScrollerForPage.init();
newsScrollerForPage.decreasePage();
});
</script>
Which produces the result:
current page index 0
I want to call the function from an anchor tag so I have:
<div class="scroller-left">
<a id="scroller-left-a" href="javascript:newsScrollerForPage.decreasePage();">
<img src="/Images/Left-Scroller.jpg"/>
</a>
</div>
But when I click the anchor I get:
newsScrollerForPage is not defined
Why is this? Surely I should be able to call the object and function just like I did in the .ready method?
You define the newsScrollerForPage inside the ready function with local scope (by using "var"), you can't use it outside of there except if you define a function in the same scope which uses it (scope is evaluated from where functions are defined, not from where they are called).
You can quickly fix the issue by taking away the var from before it (making it more global rather than local in scope) but I wouldn't suggest this as the best solution.
Better would be to link up the anchor like this:
$(document).ready(function () {
var newsScrollerForPage = new NewsScroller();
newsScrollerForPage.init();
newsScrollerForPage.decreasePage();
document.getElementById("scroller-left-a").onclick=function()
{
newsScrollerForPage.decreasePage();
return false;
}
});
and removing the href from the HTML element.

Categories

Resources