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

时间:2016-03-05 00:21:58

标签: javascript angularjs meteor angular-ui-router

我正在使用具有以下结构的mongoDB Collection构建角度流星应用程序:

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

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

  1. 主页:包含负面想法列表
  2. 否定思想:包含更好的想法列表
  3. 更好的思考细节
  4. 在第1级点击否定的想法会导致第2级的负面想法。这有效。点击第2级中的更好的想法,但不会在第3级中产生更好的思想细节。

    我的UI路由器.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 Details):

    <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级的链接?

1 个答案:

答案 0 :(得分:0)

尝试了一些事情并自己找到了解决方案。它是将ui-sref更改为以下内容:

betterThoughtDetails({
   betterThoughtId : betterThought._id._str

获取ObjectId对象的._str属性。