Question

如何在更改AngularJS中的选择框内容时重新加载不同控制器的嵌套状态？

我有2个选择框1.Category和2.SubCategory

根据类别和子类别，产品将显示在内部状态

类别和子类别属于addproducts state

产品属于addproducts状态下的.productsettings状态

但我的问题是，当我选择类别和子类别时，将显示产品，意味着

$state.go('addproducts.productsettings');

会起作用，但在之后选择两者时，我只更改子类别选择框，它不会重新加载产品状态

$state.go('addproducts.productsettings');

将无法在ProductSettingsController中加载

这是我的html代码，它包含两个选择框

  <form>
      <div class="form-group">
        <label for="exampleSelect1"><b>Category</b></label>
        <select ng-model="selectedCategory" class="form-control" id="categories" ng-init="selectedCategory = null" 
        ng-change="onCategoryChange(selectedCategory)"> 
            <option value="">--Select--</option>
                <option ng-repeat="(key,value) in categories | orderBy:'catName'| groupBy:'catName'">{{key}}</option>           
                </select>           
      </div>              
    </form>     
    <!-- ----------------------------------- -->

  </div>


  <div class="col-md-3"> 

  <!-- ----------------------------------- -->
    <form>    
      <div class="form-group">
        <label for="exampleSelect1"><b>SubCategory</b></label>
        <select class="form-control" id="subcategories" ng-model="selectedSubCategory" ng-disabled="!selectedCategory"
         ng-options="categories.subCatName for categories in categories | filter: {catName:selectedCategory}" ng-change="getValue()">
             <option value="">--Select--</option>
            </select>
      </div>          
    </form>     
    <!-- ----------------------------------- -->

  </div>

这是我的js代码

 var appshop = angular.module('appShop', [ 'ui.router', 'angular.filter' ]);

    appshop.config(function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/category');

        $stateProvider.state('addproducts',
        {
            url : '/addproducts',
            views :
            {                               
                'body' :
                {
                    templateUrl : 'category/manageproduct.htm',
                    controller : 'AddProductController'             
                }
            }
        })

        .state('addproducts.productsettings',
        {
            url : '/productsettings',
            views :
            {                               
                'productsbody@addproducts' :
                {
                    templateUrl : 'category/productsettings.htm',
                    controller : 'ProductsSettingsController'               
                }
            }
        })

    });

    //==========================================================

    appshop.controller('AddProductController',AddProductController);

    function AddProductController($scope, $http,$state)
    {
        $scope.onCategoryChange = function(category) 
        {
            if (!category) 
            {
                $scope.selectedSubCategory = undefined;

            }
        }   
        var categoryPromise = $http.get("../rest/mcategory");
        categoryPromise.success(function(data, status, headers, config) 
        {
            $scope.categories=data;         
        });

        categoryPromise.error(function(data, status, headers, config) 
        {
            alert("Error");     
        });     

        $scope.getValue=function()
        {       
            $state.go('addproducts.productsettings');       
        }   

    }

    //==========================================================

    appshop.controller('ProductSettingsController',ProductSettingsController);

    function ProductSettingsController($scope,$http,$state)
    {
        alert("Clicked")//I need to get alert here

    }

这两个选择框属于AddProductController

产品是在此AddProductController的嵌套状态下进行的，它被命名为ProductSettingsController

当我选择类别和子类别时，它可以正常工作

但是在选择了两个之后只改变了子类别它不会起作用

在选择subcatname时获取产品详细信息的任何想法？当我在子类别选择框中更改

时，我需要获得提醒。在ProductSettingsController中单击

Answer 1

尝试：

$state.reload();

或

$state.go('addproducts.productsettings', {}, {reload: true});

Answer 2

使用 $ stateParams 表示url中的参数：look

HTML 子类别

<!-- ----------------------------------- -->
    <form>    
      <div class="form-group">
        <label for="exampleSelect1"><b>SubCategory</b></label>
        <select class="form-control" id="subcategories" ng-model="selectedSubCategory" ng-disabled="!selectedCategory"
         ng-options="categories.subCatName for categories in categories | filter: {catName:selectedCategory}" ng-change="getValue(selectedSubCategory)">
             <option value="">--Select--</option>
            </select>
      </div>          
    </form>     
    <!-- ----------------------------------- -->

JS 在子状态中添加stateParams

.state('addproducts.productsettings',
        {
            url : '/productsettings?:subitem',
            views :
            {                               
                'productsbody@addproducts' :
                {
                    templateUrl : 'category/productsettings.htm',
                    controller : 'ProductsSettingsController'               
                }
            }
        })

<强>控制器

$scope.getValue=function(sub_item)
{       
    $state.go('addproducts.productsettings', {subitem:sub_item});       
}

$ state.go（）在AngularJS中没有刷新？

2 个答案: