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>

@Sarkhan I want to write something in textarea and submit it to twitter as a status. The problem is I have to pass it in url, in order to do that so I made variable as 'status' that can hold the value of textarea as $scope.textModel. But I don't know how to pass it in url as url is in services and my variable is in controller. — reeversedev
– reeversedev, Commented Apr 8, 2017 at 20:30

Raphael Parreira · Accepted Answer · 2017-04-08 20:39:09Z

3

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);
   }
});

answered Apr 8, 2017 at 20:39

Raphael Parreira

4684 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

reeversedev Over a year ago

I totally got the concept but I am still getting an error. I don't know why though.

reeversedev Over a year ago

Hey! I really need help with my code right now. Can you please help?

Raphael Parreira Over a year ago

Yes, I can. What do you need?

Raphael Parreira Over a year ago

Yes, of course. The tweet is limited to 144 chars, but it is another problem, right? You need to post another question. This current question was answered. Please, mark this answer as right and open another question.

Chris Noring · Accepted Answer · 2017-04-08 23:53:04Z

2

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.

answered Apr 8, 2017 at 23:53

Chris Noring

4713 silver badges9 bronze badges

1 Comment

reeversedev Over a year ago

Sure, but I am getting an error. Can you please help?

Collectives™ on Stack Overflow

How to access $scope in service in Angularjs?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related