代码之家 › 专栏 › 技术社区 › Saqib Ali

UI路由器的父状态可以访问它的子成员吗?

angular-ui-router angularjs

Saqib Ali · 技术社区 · 6 年前

我用的是安古拉的 UI-Router 管理我的Web应用程序的路由。

我有两种状态: parent_state 和 child_state 排列如下。

$stateProvider
.state('parent_state', {
    abstract: true,
    views: {
        '@' : {
            templateUrl: 'http://example.com/parent.html',
            controller: 'ParentCtrl'
        }
    }
})
.state('child_state', {
    parent: 'parent_state',
    url: '/child',
    params: {
      myArg: {value: null}
    },
    views: {
      'mainarea@parent_state': {
          templateUrl: 'http://example.com/child.html',
          controller: 'ChildCtrl'
        }
    }
})

从内 ChildCtrl 我可以进入 myArg 这样地:

app.controller("ChildCtrl", function($stateParams) {
    console.log('myArg = ', $stateParams.myArg);
});

我可以进去吗 迈亚格 并将其显示在HTML页面中 parent.html ?如果是这样,怎么做?我明白了 ParentCtrl 甚至从未调用抽象状态的控制器。

这个 question 解决相关主题。但它不显示如何在父状态的模板中显示子状态的参数。

3 回复 | 直到 6 年前

Amirhossein Mehrvarzi GGregson 6 年前

我可以进去吗 myArg 并将其显示在 HTML页面 Pr.HTML ?

这违背了用户界面路由器的原则。 . 父参数可以在子项中使用,但不能在子项中使用。在不重新初始化控制器的情况下,父视图如何知道更改?你需要看一看。

真正的方法是 Multiple Named Views . 看看这个工作 plunkr .

fracz 6 年前

我首先想到的是在子参数更改后使用事件通知父级。请参见以下内容(您甚至可以在此处运行它)。

子级在渲染后,使用参数的更改值向父级发出事件。父级获取并将其显示在自己的模板中。

angular.module('myApp', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('parent_state', {
    abstract: true,
    template: "<h1>Parent! Value from child: {{ paramFromChild }}</h1><div ui-view></div>",
    controller: function ($scope) {
      $scope.$on('childLoaded', function (e, param) {
        $scope.paramFromChild = param;
      });
    }
  })
  .state('child_state', {
    parent: 'parent_state',
    url: '/child',
    params: {
        myArg: {value: null}
    },
    template: '<h2>Child! Value: {{ param }}</h2>',
    controller: function($stateParams, $scope){ 
      $scope.param = $stateParams.myArg;
      $scope.$emit('childLoaded', $stateParams.myArg);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.20/angular-ui-router.js"></script>

<div ng-app="myApp">
  <a ui-sref="child_state({myArg: 'first'})">First link</a>
  <a ui-sref="child_state({myArg: 'second'})">First second</a>
  <div ui-view></div>
</div>

Tessy Thomas 6 年前

是的,这是可能的。

使用 $statechangesuccess :

你可以使用 $statechangesuccess 为了达到这个目的。

例如:

.state('main.parent', {
  url: '/parent',
  controller: 'ParentController',
  controllerAs: 'vm',
  templateUrl: 'app/parent.html',
  data: {
    title: 'Parent'
  }
})
.state('main.parent.child', {
  url: '/child',
  controller: 'ChildController',
  controllerAs: 'vm',
  templateUrl: 'app/child.html'
})

在运行块中,按如下方式调用它:

$rootScope.$on('$stateChangeSuccess', function (event, toState, fromState) {
  var current = $state.$current;
  if (current.data.hasOwnProperty('title')) {
    $rootScope.title = current.data.title;
  } else if(current.parent && current.parent.data.hasOwnProperty('title')) {
    $rootScope.title = current.parent.data.title;
  } else {
    $rootScope.title = null;
  }
});

然后您可以从子控制器访问$rootscope.title,因为它是全局可用的。

使用A 工厂或服务 以下内容:

通过编写setter和getter,可以在控制器之间传递数据。因此,您可以从子控制器设置数据,并从父控制器获取数据。

'use strict';
(function () {
    var storeService = function () {
        //Getters and Setters to keep the values in session
        var headInfo = [];
        return {
            setData: function (key, data) {
                headInfo[key] = data;
            },
            getData: function (key) {
                return headInfo[key];
            }
        };
    };
    angular.module('MyApp')
        .factory('StoreService', storeService);
})(angular);

从子控制器设置数据

StoreService.setData('title', $scope.title)

获取数据

StoreService.getData('title');

使用事件 $EIT,$on :

您可以从子控制器发出作用域值,并在父作用域中侦听它。