Question

我在Angular应用中使用了ui.router的嵌套视图。这是我.config的相关部分：

$urlRouterProvider.otherwise('/');

$stateProvider
.state('home', {
    url: '/',
    templateUrl: 'app/components/home/home.html',
    controller: 'HomeController'
})
.state('admin', {
    url: '/admin',
    templateUrl: 'app/components/admin/admin-dashboard.html',
    controller: 'AdminCtrl'
})
.state('admin.page-1', {
    templateUrl: 'app/components/admin/page-1/page-1.view.html',
    controller: 'AdminCtrl'
})

虽然在admin.page-1视图中正确加载了admin视图，却发生了什么事情，但似乎无法访问AdminCtrl。

这是控制器：

(function() {
    'use strict';

    angular
        .module('peaches')
        .controller('AdminCtrl', Controller);

    Controller.$inject = ['$scope'];

    function Controller($scope) {
        var vm = this;

        vm.test = "Hello."
        console.log(vm.test);

        vm.organization  = {
            name: "Western Fund"
        };

        activate();

        function activate() {

        }
    }
})();

console.log(vm.test)在我转到admin.page-1时可以正常工作，但它似乎没有加载到我的嵌套视图page-1.view.html中，在这里：

<div class="col-xs-12">
    <h1>{{vm.test}}</h1>
</div>

我做错了什么？

Answer 1

正如Apédémak和dhavalcengg所说，我没有在我的路线中定义controllerAs，因此没有定义vm。这解决了这个问题：

.state('admin', {
    url: '/admin',
    templateUrl: 'app/components/admin/admin.html',
    controller: 'AdminCtrl as vm'
})

Answer 2

我认为您正在谈论使用ui-router在父母和孩子之间共享$ scope。这是用示例https://stackoverflow.com/a/27699798/284225

解释它的帖子

Angular ui-router：子状态不访问父控制器

2 个答案: