嵌套视图角UI路由器变量 [英] Angular ui-router variable in nested view

问题描述

我目前工作的一个应用，在那里我有多个嵌套的意见，他们看起来就有点像这样的：

   - 用户界面视图
   - 用户界面视图=头
   - 用户界面视图=导航
   - 用户界面视图=身
 

我的状态被定义如下：

  .STATE（'指数'，{
   网址：''，//默认路由
   templateUrl：welcome.html
}）
.STATE（'应用'，{
    摘要：真实，
    templateUrl：app.template.html'//这个模板包含了3个不同的UI的意见
}）//我使用一个不同的状态，在这里，所以我可以设置默认的导航和头
.STATE（应用内，{
    父：应用程序，
    摘要：真实，
    观点：{
       导航@应用：{...}，
       头@应用：{...}
    }
}）//在应用路线
.STATE（仪表盘，{
     父：应用内，
     网址：'/应用/仪表盘
     观点：{
         身体@应用：{...}
    }
}）
.STATE（'用户'，{
     父：应用内，
     网址：'/应用/用户
     观点：{
         身体@应用：{...}
    }
}）
.STATE（设置，{
     父：应用内，
     网址：'/应用程序/设置
     观点：{
         身体@应用：{...}
    }
}）
 

目前，这个工程很大，但对于应用程序内的路线我想定义显示在标题标题@应用视图。结果
什么是做到这一点的最好方法是什么？此刻，我只能想到的任何设置上的 $ rootScope ，或发送一个事件的变量。但对于这两个我需要一个控制器。

有没有一种方法，我可以直接从我的路由配置做到这一点？

解决方案

与UI路由器的示例应用程序了，使用这个code：

UI路由器/采样/应用程序/ app.js

  .RUN（
['$ rootScope'，'$州'，'$ stateParams'，
    功能（$ rootScope，$状态，$ stateParams）{
    //这是非常方便的，以$状态和引用$ stateParams添加到$ rootScope
    //这样就可以从任何范围的应用程序。对于例如在访问它们，
    //＆LT;李纳克级={活跃：$ state.includes（'contacts.list'）}＆GT;将设置在＆lt;立GT;
    //为主动，每当contacts.list或它decendents之一是有效的。
    $ rootScope $状态= $状态。
    $ rootScope $ stateParams = $ stateParams。
}]）
 

这意味着，以数据：{} 特点：

安装自定义数据到状态对象

  

您可以将自定义数据的状态对象（我们建议您使用数据属性来避免冲突）。

  //示例显示了基于对象的状态和基于字符串的状态
VAR接触= {
    名称：'联系人'，
    templateUrl：contacts.html'，
    数据：{
        customData1：5，
        customData2：蓝
    }
}
 

我们可以这样做：

  .STATE（应用内，{
    父：应用程序，
    摘要：真实，
    观点：{
       导航@应用：{...}，
       头@应用：{...}
    }
    数据：{标题：我的标题}，
}）
 

和使用它的一些模板，如：

 ＆LT; D​​IV＆GT; {{$ state.current.data.title}}＆LT; / DIV＆GT;
 

一些总结。

• 我们可以把状态而params为$ rootScope，所以我们可以在没有任何控制器anyhwere访问它。


• 我们可以通过数据声明一些更多的自定义的东西并使用它作为一个的标题的... anyhwere

I'm currently working on an app where I have multiple nested views, they sort of look like this:

- ui-view 
  - ui-view="header"
  - ui-view="nav"
  - ui-view="body"

My states are defined as follows:

.state('index', {
   url: '', // default route
   templateUrl: 'welcome.html'
})
.state('app', {
    abstract: true,
    templateUrl: 'app.template.html' // This template contains the 3 different ui-views
})

// I'm using a different state here so I can set the navigation and header by default
.state('in-app', { 
    parent: 'app',
    abstract: true,
    views: {
       'nav@app': { '...' },
       'header@app': { '...' }
    }
})

// In-app routes
.state('dashboard', {
     parent: 'in-app',
     url: '/app/dashboard'
     views: {
         'body@app': { '...' }
    }
})
.state('users', {
     parent: 'in-app',
     url: '/app/users'
     views: {
         'body@app': { '...' }
    }
})
.state('settings', {
     parent: 'in-app',
     url: '/app/settings'
     views: {
         'body@app': { '...' }
    }
})

At the moment this works great, but for the in-app routes I would like to define a title that is displayed in the header@app view.
What would be the best way to do this? At the moment I can only think of either setting a variable on the $rootScope, or sending out an event. But for both of those I would need a controller.

Is there a way I could do this directly from my routes config?

解决方案

The sample applicaiton of the UI-Router, uses this code:

ui-router / sample / app / app.js

.run(
[ '$rootScope', '$state', '$stateParams',
    function ($rootScope, $state, $stateParams) {
    // It's very handy to add references to $state and $stateParams to the $rootScope
    // so that you can access them from any scope within your applications.For example,
    // <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
    // to active whenever 'contacts.list' or one of its decendents is active.
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}])

And that means, that with data : {} feature:

Attach Custom Data to State Objects

You can attach custom data to the state object (we recommend using a data property to avoid conflicts).

// Example shows an object-based state and a string-based state
var contacts = { 
    name: 'contacts',
    templateUrl: 'contacts.html',
    data: {
        customData1: 5,
        customData2: "blue"
    }  
}

we can do this:

.state('in-app', { 
    parent: 'app',
    abstract: true,
    views: {
       'nav@app': { '...' },
       'header@app': { '...' }
    }
    data: { title : "my title" },
})

And use it in some template like:

<div>{{$state.current.data.title}}</div>

Some summary.

• We can place state and params into $rootScope, so we can access it without any controller anyhwere.
• We can declare some more custom stuff via data and use it as a title ... anyhwere

这篇关于嵌套视图角UI路由器变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！