CODEWITHSUNDEEP
javascriptangularjs
reeversedev
reeversedev

Reputation: 522

How to access $scope in service in Angularjs?

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>

Upvotes: 2

Views: 1473

Answers (2)

Chris Noring
Chris Noring

Reputation: 471

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.

Upvotes: 2

Raphael Parreira
Raphael Parreira

Reputation: 468

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

Upvotes: 3

Related Questions