Angularjs 角斗

嗯，我有这个项目，ui路由器给我带来了困难。我制作了一个快速的Plunker演示：

所以基本上我有一个主视图，

index.html

，其他顶级视图被注入其中，比如

operations.index.html

。当一个顶级视图中有多个命名视图时，我的大脑就开始痛苦了，

operations.detail.html

和

operations.list.html

被注入

operations.index.html

，然后被注入

index.html

基本上，我试图实现以下行为：

当用户单击导航栏中的

Operations

项时，将显示一个包含空（新）操作的页面。URL是

/operations

当他们在列表中选择一个项目时，字段会用一些数据更新（数据是通过服务请求的，但为了简单起见，我们假设它就在控制器中）。URL是

/operations/：id

如果他们决定要创建一个新项目，在编辑当前项目时，他们单击列表顶部的

新建操作

按钮，URL将从

/operations/:id

更改为

/operations

无论是新项目还是旧项目，导航栏中的项目

操作

都保持活动状态

如果用户正在编辑项目，则应在列表中将其突出显示为活动项目，如果用户创建了新项目-

new operation

按钮应相应地突出显示

现在，检查一下奇怪的行为：转到

操作

，然后再次单击

操作

导航栏项。一切都消失了。如果执行

操作

->选择

操作1

->选择

新操作

，也会发生同样的情况

此外，请查看我试图获取

id

参数的部分：

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
  if (toParams) {
    if (toParams.id) {
      for (var i = 0; i < vm.operations.length; i++) {
        if (vm.operations[i].id == toParams.id) {
          vm.operation = vm.operations[i];
          break;
        }
      }
    }
  }
});

$rootScope.$on（“$stateChangeStart”，函数（事件、toState、toParams、fromState、fromParams）{
if（toParams）{
if（toParams.id）{
对于（var i=0；i

我不是专家，但它似乎太长太复杂，不可能是真的，特别是对于获取请求参数这样的简单任务。如果我尝试检查state change

$stateParams

对象是空的，因此这是一种解决方法。如果我试图篡改

app.js

中的状态，事情会有轻微的变化，但总有一些bug，比如

Operations

navbar项丢失其活动状态或其他奇怪的东西

我知道在SO中问这样的一般性问题是不常见的，但我真的不能理解ui路由器的概念，我能感觉到我在这里做错了事情，我真的非常感谢任何帮助，告诉我如何正确地使用ui路由器来达到我的目的。干杯。

有

我刚刚使用了这个问答中的技巧：

我添加了重定向到设置（可以处于任何状态）

并添加了此重定向器：

app.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    });
}]);

此外，我还删除了当前位于

operationcontroller.js

中的重定向：

angular.module('uiRouterApp')
  .controller('operationsController', function($state, $stateParams, $rootScope) {
    var vm = this;

    //if ($state.current.name === 'operations') $state.go('operations.new');

所有这些只是为了保持新的状态——没有url。因为如果我们只引入

url:'/new'

，解决方案将变得更加简单：

.state('operations', {
  url: '/operations',
  ..
})
.state('operations.new', {
  //url: '',
  url: '/new',

检查

所以，这样我们给了我们的路线生命。现在是时候让细节发挥作用了。要实现这一目标，我们需要更多的-

首先，我们将为两个子状态视图提供全新的

控制器

：

.state('operations.new', {
  url: '',
  views: {
    'detail': {
      templateUrl: 'operations.detail.html',
      controller: 'detailCtrl as dc',         // here new controller
   ...
})
.state('operations.detail', {
  url: '/:id',
  views: {
    'detail': {
      templateUrl: 'operations.detail.html',
      controller: 'detailCtrl as dc',         // here new controller
    ...

这两个控制器可以是相同的，因为我们将在

$stateParams.id

的内容上保留新的或现有的决策。这将是它的实施：

.controller('detailCtrl', function($scope, $state, $stateParams) {
    var op = $scope.op;

    op.operation = {id:op.operations.length + 1};

    if ($stateParams.id) {
      for (var i = 0; i < op.operations.length; i++) {
        if (op.operations[i].id == $stateParams.id) {
          op.operation = op.operations[i];
          break;
        }
      }
    }
})

---

检查

您是救生员。我真的用尽了我的智力去弄清楚想要的状态设置的配置，比如

abstract

等等。节省我的是1）添加一个

重定向到

设置和一个

重定向器

；2） 将

控制器

设置添加到状态，因为现在

$stateParams.id

会在每次路线更改（即选择操作）时更新。现在没有什么能阻止我们征服世界了呵呵：干杯，伙计！如果这是有效的，我真的很高兴。享受强大的用户界面路由器，先生；）

.controller('detailCtrl', function($scope, $state, $stateParams) {
    var op = $scope.op;

    op.operation = {id:op.operations.length + 1};

    if ($stateParams.id) {
      for (var i = 0; i < op.operations.length; i++) {
        if (op.operations[i].id == $stateParams.id) {
          op.operation = op.operations[i];
          break;
        }
      }
    }
})

  .controller('operationsController', function($state, $stateParams, $rootScope) {
    var vm = this;

    //if ($state.current.name === 'operations') $state.go('operations.new');

    vm.operation = {};

    /*$rootScope.$on('$stateChangeStart', 
                    function(event, toState, toParams, fromState, fromParams) {
      if (toParams) {
        if (toParams.id) {
          for (var i = 0; i < vm.operations.length; i++) {
            if (vm.operations[i].id == toParams.id) {
              vm.operation = vm.operations[i];
              break;
            }
          }
        }
      }
    });*/

    vm.save = function() {

      if(vm.operations.indexOf(vm.operation) >= 0){
        return;
      }
      if (vm.operation.name 
      && vm.operation.description 
      && vm.operation.quantity) {
        vm.operations.push(vm.operation);
        vm.operation = {id: vm.operations.length + 1};
      }
    };