How to access $scope in service in Angularjs?
Question
I am currently trying to post tweet via using Twitter API directly from my website but I am new to Angular and having some issues regarding passing a parameter in the url. I want to pass status variable into the url becuase I'll be getting input from textarea.
service.js
angular.module('twitterApp.services', [])
.factory('twitterService', function($q, $scope){
var authorizationResult = false;
return {
initialize: function() {
OAuth.initialize('#OAuth Key here', {cache: true});
authorizationResult = OAuth.create('twitter');
},
isReady: function() {
return(authorizationResult);
},
connectTwitter: function() {
var deferred = $q.defer();
OAuth.popup('twitter', {cache: true}, function(error, result){
if(!error){
authorizationResult = result;
}
else{
//Do Something else if there's an error
}
return deferred.promise;
});
},
clearCache: function() {
OAuth.clearCache('twitter');
authorizationResult = false;
},
postTweet() {
var status = $scope.textModel;
var deferred = $q.defer();
var promise = authorizationResult.post('/1.1/statuses/update.json?status=' + 'status').done(function(data){
deferred.resolve(data);
});
return deferred.promise;
}
}
});
Here is my controller where I declared the variable, I am pretty sure that I am wrong but I need to know the solution for this. Controller :
app.controller('TwitterController', function($scope, $q, twitterService) {
$scope.textModel = "";
twitterService.initialize();
$scope.postTweet = function() {
var status = $scope.textModel;
}
});
index.html
<!DOCTYPE html>
<html ng-app="twitterApp">
<head>
<title>Twitter OAuth.io Example</title>
<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-3.1.1.js"></script>
<script src="bootstrap.min.js"></script>
<script src="oauth.js"></script>
<script src="angular.min.js"></script>
<script src="app.js"></script>
<script src="controller.js"></script>
<script src="services.js"></script>
</head>
<body>
<div class="container text-center" ng-controller="TwitterController">
<h1>Tweet..</h1>
<span><i>Or rather just do it more than classic version.</i></span>
<div class="row">
<div>
<textarea placeholder="What's on your mind?" id="tweetBox" rows="10" ng-model="textModel"></textarea>
</div>
</div>
<div>
<button class="btn btn-lg" id="tweetButton" ng-click="postTweet()">Tweet</button>
</div>
<div>
Your tweet will appear like this:
</div>
<div>
" {{textModel}} "
</div>
</div>
</body>
</html>
2 answers
solution1
3 2017-04-08 20:39:09
You can pass an argument to your postTweet function.
Part of your Service:
postTweet(text) {
var status = text;
var deferred = $q.defer();
var promise = authorizationResult.post('/1.1/statuses/update.json?status=' + 'status').done(function(data){
deferred.resolve(data);
});
return deferred.promise;
}
And your Controller:
app.controller('TwitterController', function($scope, $q, twitterService) {
$scope.textModel = "";
twitterService.initialize();
$scope.postTweet = function() {
twitterService.postTweet($scope.textModel);
}
});
solution2
2 2017-04-08 23:53:04
Essentially the answer above is correct, I just want to add that it's important to handle the error in the service or at the very least in the controller, right now only deferred.resolve() is being called on success. You should capture any twitter error and do a deferred.reject(err) So your controller looks like:
$scope.postTweet = function() {
twitterService.postTweet($scope.textModel)
.then( data => console.log(data) )
.catch( err => console.error(err) );
}
I'm sure there are better ways to handle success/error than console.log but you get the idea I hope, don't forget the error case.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.