如何在angularjs的子模块中引用控制器

pedrommuller 发表于 Dev

rom

我在angular应用程序上使用模块/ sub模块，我的控制器未在特定路径上加载，但视图却加载了，根据对此问题的评论，我应该引用主模块内的子模块，并且应该招。

这是我引导应用程序的代码：

angular.module('mainApp', ['ui.bootstrap', 'ui.utils', 'ui.router', 'ngResource', 'ngAnimate', 'ngCookies', 'facebook', 'subModule1', 'subModule2', 'subModule3']);

angular.module('mainApp').config(function ($stateProvider, $urlRouterProvider, $locationProvider, FacebookProvider) {
    $stateProvider.state("root",
    {
        url: '',
        abstract: true,
        views: {
            'footer@': {
                templateUrl: "/partial/footer/footer.html",

            },
            'header@': {
                templateUrl: "/partial/header/header.html",
            }
        }
    }).state('root.home', {
        url: '/index',
        views: {
            'container@': {
                templateUrl: '/partial/index/index.html',
                controller: 'IndexCtrl'
                }
            },
        }
    ).state('root.login', {
        url: "/login",
        views: {
            'container@': {
                templateUrl: '/partial/login/login.html',
                controller: 'LoginCtrl'
            }
        },
    });
    FacebookProvider.init('xxxxxx');
    $urlRouterProvider.otherwise('/index');
    $locationProvider.hashPrefix('!');
});

我在名为/subModule1/submodule1.js的单独文件夹中拥有子模块配置

angular.module('subModule1').config(function($stateProvider) {
    $stateProvider.state("submodule1",
    {
        url: '',
        abstract: true,
        views: {
            'footer@': {
                templateUrl: "/partial/footer/footer.html",

            },
            'header@': {
                templateUrl: "/partial/header/header.html",
            }
        }
    }).state('submodule1.dashboard',
    {
        url: '/dashboard',
        views: {
            'container@': {
                templateUrl: '/subModule1/partial/dashboard/dashboard.html',
                controller: 'DashboardCtrl',
                resolve: {
                    dashboardinfo: function($resource) {
                        var resourceGet = $resource('/submodule1/dashboard');
                        return resourceGet.get().$promise;
                    }
                }
            },
            'sideBar@': {
                templateUrl: '/submodule1/partial/sidebar/sidebar.html'
            },
            'navBar@': {
                templateUrl: '/submodule1/partial/navbar/navbar.html'
            }
        }
    });
});

控制器定义为：

angular.module('subModule1').controller('DashboardCtrl', function ($scope, $interval, $resource, notification, dashboardinfo) { ... }

位于页面根部的索引（即页面布局）具有

<html ng-app="mainApp">

并且控制器具有ng-controller定义，如下所示：

<div ng-controller="DashboardCtrl">

一切都很好，只是控制器没有运行，也没有被视图执行。

拉迪姆·科勒

在ui-router和ng-controller="DashboardCtrl"旨在协同工作。在ui-router世界上，我们直接在状态定义中分配Controllers给views。

因此，这（就像您已经拥有的一样，没有任何更改）就足够了：

.state('submodule1.dashboard',
{
    url: '/dashboard',
    views: {
        'container@': {
            templateUrl: '/subModule1/partial/dashboard/dashboard.html',
            controller: 'DashboardCtrl',

也就是说，ui-view="container"在根（index.html）上呈现在内部的视图应提供DashboardCtrl。

有一个使用上述状态定义的示例（尽可能为1：1）。

这是index.html的内容：

<div ui-view="header"></div>
<div ui-view="navBar"></div>
<div ui-view="container"></div>
<div ui-view="sideBar"></div>
<div ui-view="footer"></div>

并且此链接将正确触发以上状态：

// root
<li><a ui-sref="root.home">root.home</a></li>
<li><a ui-sref="root.login">root.login</a></li>

// dashboard
<li><a ui-sref="submodule1.dashboard">submodule1.dashboard</a></li>

所有其他详细信息请点击此处

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。