如何在Angularjs中訪問$ scope服務？
[英]How to access $scope in service in Angularjs?
問題描述
我目前正在嘗試直接使用Twitter API從我的網站上發布推文，但是我是Angular的新手，並且在通過url中傳遞參數時遇到了一些問題。 我想將狀態變量傳遞給url，因為我將從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;
}
}
});
這是我在其中聲明變量的控制器，我敢肯定我錯了，但是我需要知道解決方案。 控制器 ：
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 個解決方案
解決方案1
3 2017-04-08 20:39:09
您可以將參數傳遞給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);
}
});
解決方案2
2 2017-04-08 23:53:04
基本上以上答案是正確的，我只想補充一點，處理服務或至少控制器中的錯誤很重要，目前僅在成功時調用deferred.resolve（）。 您應該捕獲任何Twitter錯誤並執行deferred.reject（err），因此您的控制器如下所示：
$scope.postTweet = function() {
twitterService.postTweet($scope.textModel)
.then( data => console.log(data) )
.catch( err => console.error(err) );
}
我確信比console.log有更好的方法來處理成功/錯誤，但是您可以理解，但不要忘記錯誤情況。
如何在 angularjs 服務中使用 $scope
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.