如何在父视图中获取 $stateParams? [英] How to get $stateParams in parent view?

问题描述

我想制作带有标签内容的标签.tab-content 有它自己的视图.这是代码示例

(函数(){有角的.module('infirma.konfiguracja', ['ui.router']).config(路由配置);routeConfig.$inject = ['$stateProvider'];功能路由配置($stateProvider){$stateProvider.state('app.konfiguracja', {url: 'konfiguracja/',意见:{'页面@应用':{templateUrl: 'app/konfiguracja/lista.html',控制器:'konfiguracjaListaCtrl'，控制器为:'vm'}},ncyBreadcrumb:{标签:Ustawienia systemu"}}).state('app.konfiguracja.dzial', {url: '{dzial:.*}/',意见:{'[e-mail]':{templateUrl: 'app/konfiguracja/dzial.html',控制器:'konfiguracjaDzialCtrl'，控制器为:'vm'}},ncyBreadcrumb:{标签:{{vm.nazwaDzialu}}"}});}})();

我想标记处于父状态的选定选项卡 (app.konfiguracja).

问题是当输入像/konfiguracja/firmy/这样的url时，app.konfiguracja控制器中没有$stateParams.dzial>

如何解决?

解决方案

我创建了 工作示例你的场景在这里.我想说，至少有两种方法.

第一种一般方法，我们应该如何在父视图中使用 UI-Router 及其选定的参数(标记选定的选项卡/链接)，应该使用指令 **ui-sref-active**:

ui-sref-active=cssClassToBeUsedForSelected"

所以这可能是用法:

第二种方法(我的首选)是使用参考 Model，在 parent $scope 中创建，并填充一个 <强>孩子:

.controller('konfiguracjaListaCtrl', ['$scope', function ($scope, ){$scope.Model = {};}]).controller('konfiguracjaDzialCtrl', ['$scope', function ($scope){$scope.Model.dzial = $scope.$stateParams.dzial;//我们应该做个好人，做个干净的人$scope.$on("$destroy", function(){ $scope.Model.dzial = null });}])

用法可以这样

这个被选中了

第二种方法是如何工作的?检查文档:

仅按视图层次结构继承范围

<块引用>

请记住，如果您的状态的视图是嵌套的，那么范围属性只会沿状态链向下继承.范围属性的继承与状态的嵌套无关，而与视图(模板)的嵌套有关.

您完全有可能拥有嵌套状态，其模板在您站点内的各种非嵌套位置填充 ui-view.在这种情况下，您不能期望在子状态的视图中访问父状态视图的范围变量.

检查所有操作此处

I want to make tabs with tab-content. tab-content has it's own view. Here is code sample

(function () {
    angular
        .module('infirma.konfiguracja', ['ui.router'])
        .config(routeConfig)
    ;


    routeConfig.$inject = ['$stateProvider'];
    function routeConfig($stateProvider) {
        $stateProvider
            .state('app.konfiguracja', {
                url: 'konfiguracja/',
                views: {
                    'page@app': {
                        templateUrl: 'app/konfiguracja/lista.html',
                        controller: 'konfiguracjaListaCtrl',
                        controllerAs: 'vm'
                    }
                },
                ncyBreadcrumb: {label: "Ustawienia systemu"}
            })
            .state('app.konfiguracja.dzial', {
                url: '{dzial:.*}/',
                views: {
                    '[e-mail]': {
                        templateUrl: 'app/konfiguracja/dzial.html',
                        controller: 'konfiguracjaDzialCtrl',
                        controllerAs: 'vm'
                    }
                },
                ncyBreadcrumb: {label: "{{vm.nazwaDzialu}}"}
            })
        ;
    }
})();

I want to mark selected tab which is in parent state (app.konfiguracja).

Problem is that when entering url like /konfiguracja/firmy/ there is no $stateParams.dzial in app.konfiguracja controller

How to fix it?

解决方案

I created working example for your scenario here. I would say, that there at least two ways.

The first, general way, how we should use the UI-Router and its selected params in parent views (to mark selected tab/link), should be with a directive **ui-sref-active**:

ui-sref-active="cssClassToBeUsedForSelected"

So this could be the usage:

<a ui-sref="app.konfiguracja.dzial({dzial: item.id})" 
      ui-sref-active="selected"
      >{{item.name}}</a> 

The second approach (my preferred) would be to use a reference Model, created in parent $scope, and filled in a child:

.controller('konfiguracjaListaCtrl', ['$scope', function ($scope, ) 
{
  $scope.Model = {};
}])

.controller('konfiguracjaDzialCtrl', ['$scope', function ($scope) 
{ 
  $scope.Model.dzial = $scope.$stateParams.dzial;
  // we should be nice guys and clean after selves
  $scope.$on("$destroy", function(){ $scope.Model.dzial = null });
}])

usage could be then like this

<span ng-if="item.id == Model.dzial">This is selected</span>

How is the second approach working? check the DOC:

Scope Inheritance by View Hierarchy Only

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.

Check that all in action here

这篇关于如何在父视图中获取 $stateParams?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！