Question

我需要在两个不同的ui-view（s）中加载两个不同的视图，这些视图具有不同的状态但是相同的url。我做了一个有效的例子但如果我将 app.header.view.index 更改为索引它会停止工作，我想使用不同的状态，因为我有多个加载的模块在一个项目中，每个项目都不了解其他项目，因此每个项目都有自己的路由和自己的状态，但是他们可以在同一个URL中加载不同的视图。例如，它们都有标题模块，可以为所有页面加载标题和菜单等。如果我没有清楚解释，请告诉我。

https://jsfiddle.net/navid_gh/jwjbd1j4/

HTML

<body ng-app="myApp">
    <div ui-view="header"></div>
    <div ui-view="body"></div>
    <div ui-view="content"></div>
</body>

JS

(function(angular) {
  angular.module('myApp', ["ui.router"]);

  angular.module('myApp').config(appConfig);

  appConfig.$inject = ['$stateProvider', '$urlRouterProvider'];

  function appConfig($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/");

    $stateProvider
      .state('app', {
        abstract: true,
        url: '',
        views: {
          'body@': {
            template: "1"
          }
        }
      })
      .state('app.header', {
        url: '',
        abstract: true,
        views: {
          "header@": {
            template: "<div ui-view='menu'></div><div ui-view='sidebar'></div>"
          }
        }
      })
      .state('app.header.view', {
        url: '',
        abstract: true,
        views: {
          "menu": {
            template: "2"
          },
          "sidebar": {
            template: "3"
          }
        }
      })
      .state('app.header.view.index', {
        url: '/',
        views: {
          'content@': {
            template: "4"
          }
        }
      });
  }
})(angular);

Answer 1

我不太明白你想要什么，但我可以告诉你，你所写的内容是有效的。

当您将索引更改为顶级状态时，您的ui-router匹配＆＃39; /＆＃39;多亏了别的。由于索引不再是app的孩子，这就是为什么你只有数字＆＃39; 4＆＃39;出现了。

如果您想要具有相同结构的单独模块，我建议您使用注册模块的提供程序，然后生成您的状态/视图，使其像这样：

angular.module('myApp', ["ui.router"]);
angular.module('myApp').config(appConfig);
appConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
function appConfig($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");

$stateProvider
  .state('app', {
    abstract: true,
    url: '',
    views: {
      header@': {
        template: '<div ui-view="module1"></div><div ui-view="module2"></div>'
      },
      content@': {
        template: '<div ui-view="module1"></div><div ui-view="module2"></div>'
        }
    }
  })
  .state('app.header.module1', {
    url: '',
    views: {
      "@": {
        template: "1"
      }
    }
  })
    .state('app.header.module2, {
    url: '',
    views: {
      "@": {
        template: "2"
      }
    }
  })
    .state('app.content.module1', {
    url: '',
    views: {
      "@": {
        template: "3"
      }
    }
  })
    .state('app.content.module2', {
    url: '',
    views: {
      "@": {
        template: "4"
      }
    }
  })
}

app状态的模板将是:(静态版本，您可以在模块列表中使用列表和ng-repeat）。

<body ng-app="myApp">
    <div ui-view="header"></div>
    <div ui-view="content"></div>
</body>

JSFiddle没有回答但是你能告诉我至少它是否适合你所寻找的东西？

在一个视图和相同的url angularjs ui-router中加载来自不同状态的视图

1 个答案: