javascript - 需要帮助理解 Angular ui-router 专门将 mongodb 数据从一个状态传递到另一个状态吗？

Question

所以我尝试使用 ui-router 将我的 mongodb 数据从一个状态传递到另一个状态，但在制作链接和 Controller 时遇到困难，因为我正在制作一个应用程序，其中用户拥有个人资料并且能够单击其他人的个人资料去看他们。我能够获取用户个人资料的完整列表，但单击时，它无法获取数据，因此用户个人资料为空。

app.js

angular.module('MyApp', ['ui.router']).config(function($stateProvider, $urlRouterProvider, $authProvider) {

/**
 * App routes
 */
$stateProvider
  .state('home', {
      url: '/',
      controller: 'HomeCtrl',
      templateUrl: 'partials/home.html'
  })
  .state('about', {
      url: '/about',
      templateUrl: 'partials/about.html'
  })
  .state('match', {
      url: '/match',
      controller: 'matchCtrl',
      templateUrl: 'partials/match.html'
  })
  .state('match.list', {
      url: '/list',
      controller: 'matchCtrl',
      templateUrl: 'partials/match.list.html'
  })
  //this part is where I need help on most with the controller as it is not working
  .state('match.profile', {
      url: '/:displayName',
      templateUrl: 'partials/match.profile.html',
      controller: function($scope, $stateParams) {
          $scope.user = $scope.getUserProfile[$stateParams.displayName];
      }
  });
  $urlRouterProvider.otherwise('/');

account.js

angular.module('MyApp').factory('Account',function($http,$stateParams) {
    return {
        getProfile: function() {
            return $http.get('/api/me/:id');
        },
        getAllProfile: function() {
            return $http.get('/api/me');
        },
        getUserProfile: function() {
            return $http.get('/api/me' + $stateParams.displayName);
        },
        updateProfile: function(profileData) {
            return $http.put('/api/me/:id', profileData);
        }
    };

});

这部分适用于 mongodb 数据显示在用户列表中的情况 match.list.html

<div ng-repeat="user in user">
    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="well well-sm">
            <div class="row">
                <h1>{{user.displayName}}</h1>
                <h1>{{user.age}} </h1>
                <a  ng-href="#/match/{{user.displayName}}">
                    See {{user.displayName}}!
                </a> 
            </div>
        </div>
    </div> 
</div>

配置文件部分不起作用，因为单击 ng-href 只会导致没有数据的空白配置文件。

match.profile.html

<h1>{{user.displayName}}</h1>
<h1>{{user.age}}</h1>
etc...

当我在列表部分使用 ng-href 单击用户配置文件时，我将如何解决此问题。它会带着数据进入用户配置文件吗？我是否发现与 ui-router 问题类似的任何示例？

编辑 和我的 Controller 有关系吗？ 匹配.js

angular.module('MyApp')
.controller('matchCtrl', function($scope, toastr,  Account) {
   // set up the filter
    $scope.sortUser = 'displayName';
    $scope.sortReverse = false;
    $scope.searchUser = '';

    // get all of the users
    $scope.getAllProfile = function () {
        Account.getAllProfile()
            .then(function (response) {
                $scope.user = response.data;
            })
            .catch(function (response) {
                toastr.error(response.data.message, response.status);
            });
    };

    $scope.getUserProfile = function () {
        Account.getUserProfile()
            .then(function(response) {
                $scope.user = response.data;
            })
            .catch(function (response) {
                toastr.error(response.data.message, response.status);
            });
    };
    // get the users
    $scope.getAllProfile();
    $scope.getUserProfile();


});

我在节点上使用的其余 API

app.get('/api/me/', function(req, res) {
User.find(function(err, user) {
res.send(user);
    });
    });



     app.get('/api/me/:id', ensureAuthenticated, function(req, res) {
 User.findById(req.user, function(err, user) {
  res.send(user);
     });
    });


  app.put('/api/me/:id', ensureAuthenticated, function(req, res) {
   User.findById(req.user, function(err, user) {
if (!user) {
  return res.status(400).send({ message: 'User not found' });
}
user.picture = req.body.picture || user.picture;
user.displayName = req.body.displayName || user.displayName;
user.email = req.body.email || user.email;
user.save(function(err) {
  res.status(200).end();
});

}); });

Answer 1

您的match.profile Controller 永远不会解析 getUserProfile 从 API 返回的 promise ，这就是 UI 为空白的原因。

首先，正如其他人指出的那样， Controller 需要将帐户服务注入(inject)其中。 getUserProfile需要正确调用方法(使用 () 而不是 [])。

controller: function($scope, $stateParams, Account) {
  $scope.user = Account.getUserProfile($stateParams.displayName);
}

我也不确定定义您的帐户工厂依赖于 $stateParams 是否能够正常工作，因为工厂是单例，当您更改状态时 $stateParams 可能无法正确更新；您必须检查开发人员工具中的“网络”选项卡，以确保正确构建 API 端点(或者仅在 $stateParams 方法中记录 getUserProfile )。我认为更好的选择是将 url 变量作为参数。无论如何，您都试图传递它，但该方法不需要任何参数。

getUserProfile: function(displayName) {
  return $http.get('/api/me' + displayName);
}

最后，你的 Controller 应该看起来像这样

controller: function($scope, $stateParams, Account) {
  Account.getUserProfile($stateParams.displayName)
  .then(function (profile) {
    $scope.user = profile;
  });
}

<小时/>

UI-Router 的其他一些技巧

• 使用 UI-Router，您应该主要关注应用程序的状态，而不是 URL。在 UI-Router 中进行状态转换的正确方法是使用 ui-sref 而不是ng-href 。请注意ui-sref采用州名称，而不是 url，因此代替 <a ng-href="#/match/{{user.displayName}}"> ，最好这样做<a ui-sref='match.profile({displayName: user.displayName})'> (请注意如何仍然可以将 displayName 变量作为参数传递给 $stateParams。

• 您的match.profile state 是 resolve 的完美用例功能。解析函数允许您在状态加载之前加载数据。这可确保您的数据在 UI 呈现之前始终可用于您的状态。

  .state('match.profile', { url: '/:displayName', templateUrl: 'partials/match.profile.html', resolve: { profile: function ($stateParams, Account) { return Account.getUserProfile($stateParams.displayName) .then(function (profile) { return profile; });<br/> } }, controller: function($scope, profile) { $scope.user = profile; } });

请注意如何将解析函数命名为您想要的任何名称，在本例中 profile 。您可以将其直接注入(inject)到您的 Controller 中，并确定一旦 Controller 加载，您的数据就已经可用于 UI。没有加载数据，没有解决 promise 。这更接近于 Angular MVC 架构中 Controller 的正确关注点分离，其中 Controller 不应该关心加载自己的数据。