angularjs一个模板与多个控制器

时间:2015-02-24 00:52:01

标签: javascript angularjs

我正在使用UI-Router模块来配置状态。我有多个状态工作并路由到控制器(TasksCtrl)并在模板中呈现(TasksPendingTable)。我需要让另一个控制器使用此模板(TaskSearchCtrl)。可能吗?这是我的国家配置。

/// <reference path="E:\Work\myApp\AngularSPA\AngularSPA\Views/TasksEndedTable.cshtml" />
/// <reference path="E:\Work\myApp\AngularSPA\AngularSPA\Views/TasksEndedTable.cshtml" />
'use strict';

angular.module('myApp', ['ui.router', 'myApp.controllers', 'myApp.filters', 'ui.bootstrap'])
    .config(['$stateProvider', '$locationProvider',
      function ($stateProvider, $locationProvider)
      {
        $stateProvider
            .state('tasksPending', {
              url: '/tasksPending',
              templateUrl: 'views/TasksPendingTable.cshtml',
              controller: 'TasksCtrl'
            })
            .state('tasksOverdue', {
              url: '/tasksOverdue',
              templateUrl: 'views/TasksPendingTable.cshtml',
              controller: 'TasksCtrl'
            })
            .state('tasksCompleted', {
              url: '/tasksCompleted',
              templateUrl: 'views/TasksPendingTable.cshtml',
              controller: 'TasksCtrl'
            })
            .state('tasksCancelled', {
              url: '/tasksCancelled',
              templateUrl: 'views/TasksPendingTable.cshtml',
              controller: 'TasksCtrl'
            })
            .state('taskSearchForm', {
              url: '/tasksSearchForm',
              templateUrl: 'views/taskSearch.cshtml',
              controller: 'TaskSearchCtrl'
            })
            .state('taskSearchResult', {
              url: '/tasksSearchResult',
              templateUrl: 'views/TasksPendingTable.cshtml',
              controller: 'TaskSearchCtrl'
            })
            .state('taskEdit', {
              url: '/tasks/:id/Edit',
              templateUrl: 'views/tasksEdit.cshtml',
              controller: 'TaskEditCtrl'
            })
            .state('taskAdd', {
              url: '/tasks/Add',
              templateUrl: 'views/taskAdd.cshtml',
              controller: 'TaskAddCtrl'
            })

            // Otherwise routes -----------------------------
            .state('otherwise', {
              url: '*path',
              templateUrl: 'views/404',
              controller: 'Error404Ctrl'
            });

        $locationProvider.html5Mode(true);

      }]);

2 个答案:

答案 0 :(得分:0)

如果您想拥有两个控制器,那么您应该考虑使用provider,例如工厂或服务。控制器可以有多个注入工厂,因此您可以在工厂中而不是在控制器内部包含大部分逻辑。 Here是我在制作Angular应用程序时经常使用的样式指南,它包含有关如何正确设置工厂的信息。我希望这有帮助!

答案 1 :(得分:0)

如果我在同一路径中需要两个控制器,我会做的是定义包含在不同控制器中的两个指令,然后在我想要定义的路径中使用这两个指令。