Question

我有一个角度服务，它获取被解析为promise的currentuser对象。我有一个部分由一个在方法调用中调用的对象userdetails填充，但不幸的是，在解析了promise之后调用时，方法调用没有触发。

.controller('AccountCtrl', [
    '$scope', 'userService', '$compile', '$http', 'utility', 'cloudService', function ($scope, userService, $compile, $http, utility, cloudService) {

        $scope.userdetails = {};
        $scope.downloadPageChk = $scope.paymentHistoryPageChk = $scope.manageGroupsPageChk = "hide";
        $scope.getUserAttribute = function (param, x) {
            return userService.getAttribute(param, x);
        };
                cloudService.fetchCurrentUser().then(function (newCurrentuser)
                {
                    if (newCurrentuser)
                    {
                        $scope.currentUser = newCurrentuser;
                        $scope.getUserDetails = function()
                        {
                            if (userService && userService.isLoggedIn())
                            {
                                $scope.userdetails = JSON.parse(JSON.stringify(currentUser));
                            }
                        };

                        if (newCurrentuser == 'member') {
                            if (newCurrentuser.features.download) $scope.downloadPageChk = "show";
                            if (newCurrentuser.features.paymenthistory) $scope.paymentHistoryPageChk = "show";
                            if (newCurrentuser.group.enabled) $scope.manageGroupsPageChk = "show";
                        }
                    }
                }
])

partial
 <div data-ng-controller="AccountCtrl">
<div data-ng-init="getUserDetails()">
<input type="text" class="form-control pull-left" id="FirstName" name="FirstName" data-placeholder-attr="First Name" data-ng-model="userdetails.firstname" required>
<input type="text" class="form-control pull-left" id="LastName" name="LastName" data-placeholder-attr="Last Name" data-ng-model="userdetails.lastname" required>
</div>
</div>

请让我知道我错过了什么。我现在正在敲打我的头10个小时，如果我移动用户详细信息，如果cloudservice.fetchuser（）。then（）它至少调用该函数，不知道当我把它放进去时发生了什么。

类似这里创建的插件 http://plnkr.co/edit/pLAB4VpLU7uhlSibHzXP?p=preview 感谢

Answer 1

如果您只想初始化数据 - 您不需要$scope.getUserDetails功能和data-ng-init="getUserDetails()"。

Angular将执行服务fetchCurrentUser功能，并在加载时填充$scope.userdetails。

cloudService.fetchCurrentUser().then(function (newCurrentuser)
{
   if (newCurrentuser)
   {
         $scope.currentUser = newCurrentuser;
         if (userService && userService.isLoggedIn())
         {
            $scope.userdetails = JSON.parse(JSON.stringify($scope.currentUser));
         }

         if (newCurrentuser == 'member') {
            if (newCurrentuser.features.download) $scope.downloadPageChk = "show";
            if (newCurrentuser.features.paymenthistory) $scope.paymentHistoryPageChk = "show";
            if (newCurrentuser.group.enabled) $scope.manageGroupsPageChk = "show";
         }
       }
   }
}

请参阅plunker。

修改：

如果您希望getUserDetails函数在初始化后仍可触发，则应将其置于服务方法之外：

$scope.getUserDetails = function(){
    if (userService && userService.isLoggedIn()){
       $scope.userdetails = JSON.parse(JSON.stringify($scope.currentUser));
    }
};

然后根据需要触发（通过ng-click="getUserDetails()"或来自控制器的$scope.getUserDetails()。

Answer 2

在将ng-init添加到$scope.getUserDetails之前，您正在运行$scope，因为这只会在回调中发生，这就是您遇到问题的原因。

我认为你可能会过于密切地关注一些基本的例子。当您异步获取数据时，您不需要ng-init 您让控制器要求服务人员下载数据，当它到达时您将其分配给$scope.getUserDetails并且角度将它放在屏幕上。

您可以看到更新的plnkr

让我知道我是否遗漏了重要的内容

Answer 3

您应该将功能移到cloudservice.fetchuser().then()方法之外。在致电getUserDetails之前，$scope对象无法使用cloudservice.fetchuser().then()方法。但是你不能在你的部分中这样做。

.controller('AccountCtrl', [
  '$scope', 'userService', '$compile', '$http', 'utility', 'cloudService', 
  function ($scope, userService, $compile, $http, utility, cloudService) {
     $scope.userdetails = {};

     $scope.getUserDetails = function(service, user) {
       if (service && service.isLoggedIn()) {
         $scope.userdetails = JSON.parse(JSON.stringify(user));
       }
     };

     $scope.downloadPageChk = $scope.paymentHistoryPageChk = $scope.manageGroupsPageChk = "hide";

     $scope.getUserAttribute = function (param, x) {
       return userService.getAttribute(param, x);
     };

     cloudService.fetchCurrentUser().then(function (newCurrentuser) {
       if (newCurrentuser) {
         $scope.currentUser = newCurrentuser;
         $scope.getUserDetails(userService, newCurrentuser);

          if (newCurrentuser == 'member') {
            if (newCurrentuser.features.download) $scope.downloadPageChk = "show";
            if (newCurrentuser.features.paymenthistory) $scope.paymentHistoryPageChk = "show";
            if (newCurrentuser.group.enabled) $scope.manageGroupsPageChk = "show";
          }
       }
     });
   });
]);

Answer 4

我没有看到使用ng-init指令和$scope.getUserDetails方法，角度双向数据绑定将处理承诺。我已更新了相同的plunker。 http://plnkr.co/edit/IzjNqpdk0zvnHYyCnKJi?p=preview

在服务调用后，角度方法不在控制器中触发

4 个答案: