使用UI路由器顯示$狀態數據的簡單方法

我已經看到類似問題的所有其他答案，但我認爲這是不同的。

我有一個狀態定義爲這樣：

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

在飛行log.html我想這樣做{{$ state.current.data.pageTitle}}或{{$狀態.data.pageTitle}}。但是，這不起作用。難道我做錯了什麼？

我明白這種方法固有的狀態變化問題，但現在這樣做很好。如果我必須創建一個指令，但它確實看起來像矯枉過正。我應該如何描述工作？

來源

2014-12-13 Lee

我似乎不明白這個問題。什麼不乾淨？你能否創造一個小提琴評論你認爲是錯綜複雜的？ – 2014-12-13 01:09:55

深入挖掘之後，我意識到如果我想這樣做，我需要一個.run塊。在前面的問題底部找到答案http://stackoverflow.com/questions/23813599/set-page-title-using-ui-router 什麼是適當的協議在這裏？我是否刪除了我的問題，因爲它是重複的？ – Lee 2014-12-13 02:52:45

@Lee在寫回復時，你發表了評論，我沒有看到。 – 2014-12-13 03:10:13

這裏就是我得到了它的工作：

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塊。從文檔「運行程序塊是需要運行以啓動應用程序的代碼，在所有服務已經配置完成並且注入器已經創建之後執行。」

來源

2014-12-13 03:56:39 Lee

你爲什麼接受，然後不接受答案，然後抄襲？其他人幫助你。要有禮貌。至少發表評論。 – 2014-12-13 04:09:42

這是我要做的事：

設置爲$rootScope一個裁判$state在app.run

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!" 
 
     } 
 
     }); 
 

 
    } 
 
]);

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

來源

2014-12-13 03:04:14

使用UI路由器顯示$狀態數據的簡單方法

回答

相關問題