将参数传递给Angular UI路由器模板

时间:2016-11-27 19:50:32

标签: javascript angularjs angular-ui-router angular-template es6-class

我的角度ui路由器正在将状态/视图更改为:

    $stateProvider
        .state({
            name: 'home',
            url: '/',
            template: '<home-view></home-view>',
        })

是否有方法将绑定参数传递给&lt;主页&gt;在UI路由器?

E.g。

<home-view my-data="dataObject">

<home-view my-data="myService.getMyData()">

my-view的控制器位于自己的文件中,其中包含实际模板&amp;指令。

2 个答案:

答案 0 :(得分:3)

最后,我的同事帮助解决了这个问题。解决方案使用resolve获取数据,然后将其作为路由器范围变量传递给模板。重要的学习是路由器中定义的控制器具有自己的范围而不是“主视图”的范围。在我的家庭控制器路由器控制器可以通过$ scope.parent访问。

.state({
    name: 'home',
    url: '/',
    resolve: {
        cData: (MyService) => {
            return MyService.getMyData()
        }
    },
    controller: function (cData) {
        this.data = cData;
    },
    controllerAs: 'ctrl',
    template: '<home-view my-data="ctrl.data"></home-view>'
})

答案 1 :(得分:1)

您可以使用解析器

$stateProvider
    .state({
        name: 'home',
        controller : "MyController"
        url: '/',
        resolve: {
            obj: function() {
                return {prop:"hello!"}
            }
        }
        template: '<home-view></home-view>',
})

// MyController
angular.module('app').controller('MyController', function(obj) {
    console.log(obj.prop); // hello!
});