Meteor angular ui-router ui-sref 在一种情况下工作，而不是另一种情况

Question

我正在使用具有这种结构的 mongoDB 集合构建一个角度流星应用程序：

{ 
    "_id" : "9YFoLcpDKFbJjHDoN", 
    "name" : "Negative Thought 1", 
    "betterThoughts" : [ 
                         { 
                            "name" : "bt", 
                            "_id" : ObjectId("cdb4533e03a0a430b02320af") 
                         } 
                       ] 
}

应用具有以下三个深度的结构

1. 首页：包含负面想法列表
2. 负面想法：包含更好的想法列表
3. 更好的思考细节

点击第 1 级的消极想法会导致第 2 级出现消极想法。这很有效。但是，在第 2 级中点击一个更好的想法并不会导致在第 3 级中获得该更好想法的详细信息。

我的 UI Router .config 如下所示：

angular.module('better-thoughts').config(function ($urlRouterProvider, $stateProvider, $locationProvider) {
  $locationProvider.html5Mode(true);

  $stateProvider
    .state('thoughts', {
      url: '/thoughts',
      template: '<negs-list></negs-list>'
    })
    .state('betterThoughts', {
      url: '/thoughts/:negId',
      template: '<better-thoughts></better-thoughts>'
    })
    .state('betterThoughtDetails', {
      url: '/thoughts/:negId/:betterThoughtId',
      template: '<better-thought-details></better-thought-details>'
    });
  $urlRouterProvider.otherwise("/thoughts");
});

所以前两个状态可以正常工作，第三个则不行。

在想法（第 1 级）负面想法列表 html 中，我有这段代码可以链接到下一个状态（betterThoughts）：

 <li ui-sref="betterThoughts({ negId: neg._id })" ng-repeat="neg in negsList.negs">
    {{neg.name}}
    <button ng-click="negsList.removeNeg(neg)">X</button>
  </li>

再一次，这行得通。

在更好的想法（2 级）列表中，我有以下链接到下一个状态（betterThought 详细信息）：

<ul>
  <li ui-sref="betterThoughtDetails({ betterThoughtId: betterThoughts.neg.betterThought._id})"
  ng-repeat="betterThought in betterThoughts.neg.betterThoughts">
    {{betterThought.name}} </br>
    {{betterThought._id._str}}
    <button ng-click="betterThoughts.removeBetterThought(betterThought)">X</button>
  </li>
</ul>

这不起作用。

我将只包含 BetterThoughts（级别 2）的指令以节省空间。

angular.module('better-thoughts').directive('betterThoughts', function () {
  return {
    restrict: 'E',
    templateUrl: 'client/negs/better-thoughts/better-thoughts.html',
    controllerAs: 'betterThoughts',
    controller: function ($scope, $stateParams, $reactive) {
      $reactive(this).attach($scope);

      this.newBetterThought = {};

      this.helpers({
        neg: () => {
          return Negs.findOne({ _id: $stateParams.negId });
        }
      });

      this.save = () => {
        Negs.update({_id: $stateParams.negId}, {
          $set: {
            name: this.neg.name,
          }
        }, (error) => {
          if (error) {
            console.log('Oops, unable to update the thought...');
          }
          else {
            console.log('Done!', $stateParams);
          }
        });
      };

      this.addBetterThought = () => {
        Negs.update(
          { _id : $stateParams.negId },
          {
            $push:
              { betterThoughts: {
                name : this.newBetterThought.name,
                _id : new Mongo.Collection.ObjectID()
              }
            }
          }
        );
        this.newBetterThought = {};
      };

      this.removeBetterThought = (betterThought) => {
        Negs.update(
          { _id : $stateParams.negId },
          {
            $pull: {
              betterThoughts: {
                _id: betterThought._id
              }
            }
          }
        );
      };


    }
  };
});

如果缺少重要信息，这里是我的仓库的链接：https://bitbucket.org/mandyschippers/better-thoughts

为什么从级别 1 到级别 2 的链接有效，但从级别 2 到级别 3 的链接无效？

Answer 1

尝试了一些事情并自己找到了解决方案。就是把 ui-sref 改成如下：

betterThoughtDetails({
   betterThoughtId : betterThought._id._str

获取 ObjectId 对象的 ._str 属性。