如何在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.