I was using google calendar api in angularjs and was trying to access the data in promise but i find the data is not accessible in view can you just check and let me know where i am going wrong.
<!DOCTYPE html>
<html>
<head>
<title>Google Cal Test</title>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyCtrl">
Hello<span ng-bind="responsevalue"></span>
</div>
<script src="https://apis.google.com/js/client.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script>
angular.module('MyApp',[])
.factory('gapi',function($window){
return $window.gapi;
})
.controller('MyCtrl',['$scope','gapi','$q',myCtrl])
function myCtrl($scope,gapi,$q){
var vm = this;
var CLIENT_ID = 'CLIENT_ID HERE PLZ';
var SCOPES = ["https://www.googleapis.com/auth/calendar"]
console.log(gapi);
data = {
'client_id': CLIENT_ID,
'scope': SCOPES.join(' '),
'immediate': false
};
gapi.auth.authorize(data)
.then(function(authResult){
console.log(authResult);
if(authResult && !authResult.error) return gapi.client.load('calendar', 'v3')
})
.then(function(){
return gapi.client.calendar.calendarList.list()
})
.then(function(resp){
console.log(resp);
$scope.responsevalue = resp;
console.log($scope.responsevalue);
})
}
</script>
</body>
<html>
If i am doing anything wrong please let me know or if the code can be improved better way also do let me know.
Related
Doing one Google Script APP. With server side method that returns array of string.
getClassRoomList().
Can you please suggest what is wrong with my current HTML? As the success handler is running all well on response. But the ng variable message is not reflecting on page; while the jQuery does populate the table.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('mainCtrl',function($scope){
$scope.message = [];
$scope.populateTable = function(array){
//Setting ng variable; but the page doesn't show anything
$scope.message = array;
//Setting the Table by JQuery; it does work.
var table = $('#myTable');
table.empty();
for (var i = 0; i < array.length; i++) {
var item = '<tr><td><div class="classname">' + array[i] +'</div></td></tr>';
table.append(item);
}
};
$scope.mainClick = function(){
$scope.message = $scope.message + 'chirag';
google.script.run.withSuccessHandler($scope.populateTable).getClassRoomList();
};
});
</script>
</head>
<body ng-controller="mainCtrl">
<button ng-click="mainClick()">Proceed</button>
<table id="myTable"></table>
<div ng-bind="message"></div>
</body>
</html>
This works. Thanks. google.script.run.withSuccessHandler((e) => {$scope.populateTable(e); $scope.$apply();}).getClassRoomList();
I have a method that creates an object and pushes it to an array
$scope.contracts = [];
$scope.addContract = function () {
var contract = {
...
}
$scope.contracts.push(contract);
console.log($scope.contracts);
}
now in my DOM, i have the following (merely for debugging)
{{contracts}}
But this doesn't update. I validate in the console, that the object is in the array.
Why doesn't the model update?
I've already tried various applications of $scope.$apply, but they all result in an
$apply already in progress
Something must be wrong with your code, check your DOM. Does anything happen when you call your function? Heres is a working example:
var app = angular.module("myApp",[]);
app.controller("test", function($scope){
$scope.contracts = [];
$scope.addContract = function () {
var contract = {
"con":"tract"
}
$scope.contracts.push(contract);
console.log($scope.contracts);
}
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="test">
{{contracts}}
<button ng-click="addContract()">Add contract</button>
</body>
</html>
I have set up a plunker with basically below code.
I am unable to see the default value [Bank Account Number] getting selected in the drop down. I see that model is getting updated. But for some reasons, my default value do not get chosen. Can someone help me?
//index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js" data-semver="1.0.7"></script>
<script src="script.js"></script>
<script src="services.js"></script>
</head>
<body ng-controller="homeCtrl">
<h1>Other Criteria: {{ otherCriteria.optionText }}</h1>
<div>
<select data-ng-model="otherCriteria"
data-ng-options="o as o.optionText for o in criteria">
</select>
</div>
</body>
</html>
//services.js
app.factory("homeService", [
"$q",
function($q) {
function _getDropdownValues() {
var deferred = $q.defer();
var dropdownValues = [{"optionValue":"Bank_Account_Number","optionText":"Bank Account Number","selected":false},{"optionValue":"Bank_Security_Number","optionText":"Bank Security Number","selected":false},{"optionValue":"Cusip","optionText":"Cusip","selected":false},{"optionValue":"Transaction_Description","optionText":"Description","selected":false}];
deferred.resolve(dropdownValues);
return deferred.promise;
}
return {
getDropdownValues: _getDropdownValues
}
}
]);
//script.js
var app = angular.module("app", []);
app.controller("homeCtrl", function($scope, homeService) {
$scope.otherCriteria = {
optionValue: "Bank_Account_Number",
optionText: "Bank Account Number",
selected: false
};
homeService.getDropdownValues()
.then(function(dropdownValues) {
$scope.criteria = dropdownValues;
})
});
Try this plunker.
It's always a better idea to reference a default value via the index of the collection (however you want to reference it)
$scope.criteria = dropdownValues;
$scope.otherCriteria = $scope.criteria[0];
You can find more information here
Basically: Angular.JS uses native JavaScript comparison for comparing the objects. In JavaScript, unrelated to Angular.JS or anything, comparing objects (object literals) is “by reference”, so it doesn’t factor the similarity of the objects. Only checks if the two references compared point to the same object in memory or not
im trying to get Angular to work at a really basic level. But i just dont get it. Im doing all the tutorial and everything. It kills me.
Here is what im doing:
1.) HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/Controller.js"></script>
<script src="js/friendsFactory.js"></script>
</head>
<body>
<div ng-app="friendsApp">
<div ng-controller="friendsController">
<h3>{{girlFriendName}}</h3>
</div>
</div>
</body>
</html>
2.) App.js
var friendsApp = angular.module('friendsApp',[]);
3.) Controller.js
friendsApp.controller('friendsController', ['$scope','friendsFactory', function($scope, friendsFactory){
$scope.girlFriendName = friendsFactory.girlFriend();
}]);
4.) Friendsfactory.js
friendsApp.factory('friendsFactory', function (){
this.girlFriend = function(){
var name = "Girlfriends Name";
return name;
}
});
I wanted to try this at a very basic level but now i have spent 5 hours trying to get a name from the Factory to the Controller.
If i write the name manually into the controller it works, so the controller get called.
Can anybody tell me where i am thinking wrong here?
Thank you very much!
Modify factory code:
friendsApp.factory('friendsFactory', function (){
this.girlFriend = function(){
var name = "Girlfriends Name";
return name;
}
});
To:
friendsApp.factory('friendsFactory', function (){
function girlFriend(){
var name = "Girlfriends Name";
return name;
}
return {
girlFriend: girlFriend
}
});
You have created the factory methods but didn't return it.
friendsApp.factory('friendsFactory', function (){
this.girlFriend = function(){
var name = "Girlfriends Name";
return name;
}
return {
girlFriend : this.girlFriend
}
});
I try AngularJS for the first time and I'm stuck on a problem.
In the debugger I see that the scope variable '$scope.xml' is correctly updated, but the display needs a second pass (second click) to refresh.
Here is a Plunker to see my problem : http://plnkr.co/edit/9PJsGeDqwjC6nmZHcEJV
I'm looking in the documentation but I can not find track to understand what I did not do well
Thank's a lot for your help !
<!doctype html>
<html ng-app="testAngularJS">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="testXML">
<div>XML<br/><textarea cols="60" rows="15" ng-model="xml" name="xml">{{xml}}</textarea></div>
<div><button ng-click="listTypDoc()">List !</button><br/>
<br/><button ng-click="clearXML()">Clear</button></div>
</div>
<script type="text/javascript">
var app = angular.module('testAngularJS', []);
app.controller('testXML', function($scope){
$scope.url = 'listeTypDoc.txt';
$scope.listTypDoc = function() {
$.ajax({
type:"GET",
url: $scope.url,
xhrFields: {
withCredentials: false
},
crossDomain: false
}).done(function ( data ) {
$scope.xml = data;
debugger;
});
};
$scope.clearXML = function() {
$scope.xml = '';
};
})
</script>
</body>
</html>
Because you are using a request outside the angularjs, you need to call $apply() after setting the data to the $scope.xml. Take a look in the apply method:
http://docs.angularjs.org/api/ng.$rootScope.Scope
But it's better to use the services angularjs provides instead of using jquery.