Angularjsで$ scopeのサービスにアクセスするには？

私は現在自分のウェブサイトから直接Twitter APIを使用してツイートを投稿しようとしていますが、私はAngularを初めて使っていて、URLにパラメータを渡す際にいくつか問題があります。私はテキストエリアから入力を取得するので、私は状態変数をURLに渡したいと思います。

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

は、ここで私は、変数を宣言した私のコントローラであり、私は私が間違っていることをかなり確信しているが、私は、このためのソリューションを知っている必要があります。 コントローラー：

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>

出典

2017-04-08 Prateek Gogia

あなたが直面している問題は何ですか？ – Sarkhan

@Sarkhan私はテキストエリアに何かを書いてステータスとしてtwitterに投稿したいと思います。問題は、それを行うためにURLで渡す必要があるため、$ scope.textModelとしてtextareaの値を保持できる「ステータス」として変数を作成しました。しかし、私はurlがサービス中で、変数がコントローラ内にあるので、urlでそれを渡す方法を知らない。 –

あなたのpostTweet関数に引数を渡すことができます。あなたのサービスの

パート：

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

そして、あなたのコントローラー：

app.controller('TwitterController', function($scope, $q, twitterService) { 

    $scope.textModel = ""; 

    twitterService.initialize(); 

    $scope.postTweet = function() { 
     twitterService.postTweet($scope.textModel); 
    } 
});

出典

2017-04-08 20:39:09

私は完全にコンセプトを持っていますが、まだエラーが発生しています。私はなぜか分からない。 –

私にあなたのエラーを見せてください、多分私はあなたを助けることができます。 –

ねえ！私は今、私のコードで本当に助けが必要です。あなたは助けてもらえますか？ –

基本的に上記の答えが正しいですが、私はちょうどそれがサービスでエラーを処理することが重要だということを追加したいですか少なくともコントローラーでは、今はdeferred.resolve（）だけが成功のために呼び出されています。

$scope.postTweet = function() { 
     twitterService.postTweet($scope.textModel) 
     .then(data => console.log(data)) 
     .catch(err => console.error(err)); 
    }

私はCONSOLE.LOGより成功/エラーを処理するためのより良い方法があると確信しているが、あなたが得る：あなたはだからあなたのコントローラが見える任意のTwitterのエラーをキャプチャし、deferred.reject（ERR）を行う必要があります私が望むアイデア、エラーの場合を忘れないでください。

出典

2017-04-08 23:53:04

確かに、私はエラーが発生しています。あなたは助けてもらえますか？ –

あなたのエラーについてもっと教えてください。 –

Angularjsで$ scopeのサービスにアクセスするには？

答えて

関連する問題