Question

我创建了一个标签式编辑表单，如下所示：

<ul class="nav nav-tabs">
  <li role="presentation" ui-sref-active="active">
    <a ui-sref="products.edit.general">General</a>
  </li>
  ... more tabs ...
</ul>

我的路线如下：

$stateProvider
.state('products.edit', {
    abstract: true,
    url: '/{product_id:int}/edit',
    templateUrl: 'partials/products.edit.html',
    controller: 'ProductsEditController'
})
.state('products.edit.general', { 
    url: '', 
    templateUrl: 'partials/products.edit.general.html' 
})

我为每个标签都有几个文件，例如partials/products.edit.general.html。每个都包含不同的表单字段。

现在，我正在寻求扩展此代码以使用相同的表单字段创建产品，并且只需在控制器上的POST / PUT之间切换。为此，我创建了products.new路由集，但我没有在上面的HTML上实现它们。或者我应该以不同的方式设置.new规则吗？

Answer 1

您可以从.state配置向控制器传递数据或承诺，如下所示

.state('products.edit', {
    abstract: true,
    url: '/{product_id:int}/edit',
    templateUrl: 'partials/products.edit.html',
    controller: 'ProductsEditController',
    resolve: {
        action: function () {
            return 'edit';
        }
    }
});

这将解析为控制器的依赖关系（或者resolve中使用的多个属性的依赖关系）：

angular.module('myApp').controller(function( action, /*other dependencies...*/){
    if(action === 'edit'){
        // editing specific code or variables
    }else{
       // create specific code        
    }

});

有关详细信息，请参阅UI路由器文档

如何使用AngularJS的ui.router实现创建/编辑选项卡表单？

1 个答案: