Question

我想制作标签内容标签。 tab-content有自己的观点。这是代码示例

(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

如何解决？

Answer 1

我创建了working example for your scenario here。我想说，至少有两种方式。

第一种通用方式，我们应该如何在父视图中使用UI-Router及其选定的参数（以标记选定的标签/链接），应该使用指令**ui-sref-active**：

ui-sref-active="cssClassToBeUsedForSelected"

所以这可能是用法：

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

第二种方法（我的首选）是使用在父 Model中创建的参考$scope，并填写孩子：

.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 });
}])

用法可能就像这样

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

第二种方法如何运作？检查DOC：

Scope Inheritance by View Hierarchy Only

请记住，只有嵌套状态的视图时，范围属性才会继承状态链。范围属性的继承与状态的嵌套无关，也与视图嵌套（模板）无关。

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

检查所有操作here

如何在父视图中获取$ stateParams？

1 个答案:

Scope Inheritance by View Hierarchy Only