如何获得$ stateParams在父母的看法?如何获得、看法、父母、stateParams

2023-09-13 03:55:55 作者:可爱多又多

我想和标签内容的标签。标签内容有它自己的观点。这里是code样品

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: {
                    'dzial@app.konfiguracja': {
                        templateUrl: 'app/konfiguracja/dzial.html',
                        controller: 'konfiguracjaDzialCtrl',
                        controllerAs: 'vm'
                    }
                },
                ncyBreadcrumb: {label: "{{vm.nazwaDzialu}}"}
            })
        ;
    }
})();

我要标记选中的标签是父状态( app.konfiguracja )。

问题是,如 / konfiguracja / FIRMY / 输入网址时,有没有 $ stateParams.dzial app.konfiguracja 控制器

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

如何解决?

推荐答案

我创建工作例如,对于这里您的方案。我会说,那里面至少有两种方法。

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

第一,一般的方法,我们应该如何使用 UI-路由器并在父视图的选择PARAMS(标记选定的标签/链接),应该是一个指令 ** UI的SREF主动**

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> 

第二个方法(我的preferred)是使用一个参考模式在父创建 $范围,并填充在孩子

.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>

如何第二种方式工作?检查DOC:

How is the second approach working? check the DOC:

记住,如果你的国家的意见是嵌套作用域属性只继承下来的状态链。作用域属性的继承无关,与你的国家的嵌套和一切与你的视图(模板)嵌套。

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).

这是完全可能的,你嵌套状态的模板填充在站点内的各种非嵌套位置UI的意见。在这种情况下,你不能指望子女国的意见内访问的父状态视图的范围变量。

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