angularJS使用服务变量 [英] angularJS using service variable

问题描述

我需要调用服务的变量控制。
我试着拨打 $ scope.userData1.data.name 服务功能外，它是不确定的。
如果我把 {{} userData1} 模板消息Ctrl键，它显示了所有的数据阵列包括姓名。

我需要使用USER_NAME变量加载i帧

  angular.module（'starter.controllers'，[]）
.factory（'UserService'，函数（$ HTTP）{
VAR的数据;      返回{
          的getData：函数（$ HTTP）{
                    返回$ http.get（http://www.website.com/index.php/id/user/call12）。
                    成功（功能（响应）{
                     ///的console.log（JSON.stringify（响应））;
                      用户数据= response.data;
                            返回用户数据;                   }）错误（功能（数据，状态，头，配置）{
                     //记录错误
                    }）;
          }
    }
 }）
 .controller（'MessagesCtrl'，函数（$范围，消息，$ HTTP，$ ionicPopup，$超时，$窗口，UserService，发件箱，$ SCE）{    $ scope.userData1 = {}; //更新
$ scope.myCtrl2 =功能（UserService，$ HTTP）{
 UserService.getData（$ HTTP）。然后（功能（数据）{
   $ scope.userData1 =数据;
 的console.log（$ scope.userData1.data.name）; // USERNAME存在
  变量名称= $ scope.userData1.data.name;
}）;
}$ scope.myCtrl2（UserService，$ HTTP）; 变量名称= $ scope.userData1.data.name; //未定义
 $ scope.formData4.upload_url = $ sce.trustAsResourceUrl（http://www.website.com/index.php/id/user/view_form/+姓名）;}）
 

模板：

 ＆LT;形式NG控制器=MessagesCtrlNG残疾=isRequesting＆GT;
＆LT;跨度类=逐项输入＆GT;
     ＆LT;跨度类=输入标签＆GT;＆安培; NBSP;＆LT; / SPAN＆GT;
＆LT; IFRAME ID =iframe的123SRC ={{formData4.upload_url}}的风格=边界：0像素无;高度：80px;保证金：汽车;宽度：100％;溢出：隐藏; FRAMEBORDER = 0＆GT;＆LT; / IFRAME＆GT;＆LT; / SPAN＆GT;
＆LT; /表及GT;
 

解决方案

您有未定义因为在这一点上，答案（http.get）尚未从回归服务器。结果
你必须确保此功能 $ scope.myCtrl2（UserService，$ HTTP）收到的答案之前，异步你可以打电话到下一行（VAR名= $ scope.userData1。 data.name）。

最好的解决办法是使用诺 - $ Q 这样的服务：

  .controller（'MessagesCtrl'，函数（$范围，消息，$ HTTP，$ ionicPopup，$超时，$窗口，UserService，发件箱，$标准煤，$ Q）{    $ scope.userData1 = {}; //更新
    $ scope.myCtrl2 =功能（UserService，$ HTTP）
    {
       变种推迟= $ q.defer（）;
     UserService.getData（$ HTTP）。然后（功能（数据）
       {
         $ scope.userData1 =数据;
         的console.log（$ scope.userData1.data.name）; // USERNAME存在
         变量名称= $ scope.userData1.data.name;           deferred.resolve（）;
      }）;
          返回deferred.promise;
    }  $ scope.myCtrl2（UserService，$ HTTP）。然后（函数（）{
      变量名称= $ scope.userData1.data.name; //现在你得到了答案！
      $ scope.formData4.upload_url = $ sce.trustAsResourceUrl（http://www.website.com/index.php/id/user/view_form/+姓名）;
  }）;
}）
 

I need to call the service variable in controller. I tried to call $scope.userData1.data.name outside the Service function , it is undefined. If I put {{userData1}} in template Messages Ctrl , it shows up all the data array including names.

I need to load the i-frame using the user_name variable.

angular.module('starter.controllers', [])


.factory('UserService', function($http) {
var data;   

      return{
          getData: function($http) {
                    return $http.get("http://www.website.com/index.php/id/user/call12").
                    success(function(response) {
                     /// console.log(JSON.stringify(response));
                      userData=response.data;
                            return userData;

                   }).error(function(data, status, headers, config) {
                     // log error
                    });
          }
    }
 })
 .controller('MessagesCtrl',function ($scope, Messages,$http,$ionicPopup,$timeout,$window,UserService,Outbox,$sce) {

    $scope.userData1 = {}; // updated
$scope.myCtrl2= function(UserService,$http) {
 UserService.getData($http).then(function(data) {
   $scope.userData1 = data;
 console.log($scope.userData1.data.name); // USERNAME exist
  var name= $scope.userData1.data.name;
});
}

$scope.myCtrl2(UserService,$http);

 var name= $scope.userData1.data.name; //undefined
 $scope.formData4.upload_url = $sce.trustAsResourceUrl("http://www.website.com/index.php/id/user/view_form/"+ name);

})

template :

<form ng-controller="MessagesCtrl"  ng-disabled="isRequesting">
<span class="item item-input"  >
     <span class="input-label">&nbsp;</span> 
<iframe id="iframe-123" src="{{formData4.upload_url}}" style="border: 0px none; height: 80px; margin: auto; width: 100%; overflow: hidden;" frameborder=0></iframe></span>    
</form>

解决方案

You got undefined because at this point, the answer (http.get) not yet return from the server.
You have to ensure this function $scope.myCtrl2(UserService,$http) received the answer asynchronous before you can call to the next line (var name= $scope.userData1.data.name;).

The best solution is to use promise - $q service like this:

.controller('MessagesCtrl',function ($scope, Messages,$http,$ionicPopup,$timeout,$window,UserService,Outbox,$sce,$q) {

    $scope.userData1 = {}; // updated
    $scope.myCtrl2= function(UserService, $http) 
    {
       var deferred = $q.defer();
     UserService.getData($http).then(function(data) 
       {
         $scope.userData1 = data;
         console.log($scope.userData1.data.name); // USERNAME exist
         var name= $scope.userData1.data.name;

           deferred.resolve();
      });
          return deferred.promise;
    }

  $scope.myCtrl2(UserService,$http).then(function(){
      var name= $scope.userData1.data.name; //Now you got the answer!!!
      $scope.formData4.upload_url = $sce.trustAsResourceUrl("http://www.website.com/index.php/id/user/view_form/"+ name);
  });
})

这篇关于angularJS使用服务变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！