Question

我已经看到了类似问题的所有其他答案，但我认为这是不同的。

我的状态定义如下：

  .state('2col.flight-log', {
    url: 'flight-log',
    templateUrl: 'components/2col-pages/flight-log/flight-log.html',
    data : { pageTitle: 'Flight Log' }
  })

在flight-log.html中，我想做{{$ state.current.data.pageTitle}}或{{$ state.data.pageTitle}}之类的事情。但是，这不起作用。我做错了吗？

我理解这种方法固有的状态变化问题，但现在这很好。如果我必须创建一个指令，我会，但它似乎有点矫枉过正。我的概述方式应该有效吗？

Answer 1

以下是我如何运作：

app.run([ '$rootScope', '$state', '$stateParams',
    function ($rootScope, $state, $stateParams) {
      $rootScope.$state = $state;
      $rootScope.$stateParams = $stateParams;
    }])

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

app.state('2col.flight-log', {
    url: 'flight-log',
    templateUrl: 'components/2col-pages/flight-log/flight-log.html',
    data : { pageTitle: 'Flight Log' }
})

并在flight-log.html中我将{{$ state.current.data.pageTitle}}放在我需要的任何地方。

重要的是app.run块。从文档“运行块是需要运行以启动应用程序的代码。它在配置完所有服务并创建了注入器后执行。”

Answer 2

我就是这样做的：

在app.run

中设置$rootScope参考$state

＆＃13;

var app = angular.module('app', ['ui.router']);

app.run(['$rootScope', '$state', '$stateParams',
  function($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
  }
]);


app.config(['$stateProvider', '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider
      .otherwise('/');

    $stateProvider
      .state("home", {
        url: "/",
        template: 'HELLO WORLD',
        data: {
          myData: "Working!"
        }
      });

  }
]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.ui-router/0.2.10/angular-ui-router.js"></script>

<pre ng-app="app" id="uiRouterInfo">
      $state = {{$state.current.name}}
      $stateParams = {{$stateParams}}
      $state full url = {{ $state.$current.url.source }}
      $state my data = {{ $state.$current.data.myData }}
</pre>

＆＃13;

使用ui-router显示$ state数据的简单方法

2 个答案: