Question

我希望能够点击 #leftDiv 中的锚点，并在 #rightDiv 中打开UI路由器模板。所以，当我点击 #leftDiv 中的 Hello Plunker 1 时，我希望 peopleOne.html 在 #rightDiv <中打开/ strong>即可。当我点击 Hello Plunker 2 时，我希望 peopleTwo.html 替换 #rightDiv 中的 peopleOne.html

这是一个Plunker - https://plnkr.co/edit/T8RTgea8VccA9mdBABGC?p=preview

有人可以提供有关其无效的原因的见解。

的script.js

var Delivery = angular.module('Delivery', ['ui.router']); angular .module('Delivery') .config(function($stateProvider, $locationProvider) { $locationProvider.hashPrefix(''); $stateProvider .state('home', { url: '/Delivery', views: { 'view': { templateUrl: 'Delivery.html', }, }, }) .state('peopleOne', { url: '/peopleOne', parent: 'home', views: { 'view@': { templateUrl: 'peopleOne.html' } }, }) .state('peopleTwo', { url: '/peopleTwo', parent: 'home', views: { 'view@': { templateUrl: 'peopleTwo.html' } }, }) })

Answer 1

我注意到的一些问题：

首先，在$ stateProvider配置调用之后放置console.log来设置路由。您将看到甚至从未调用此代码。您的角度应用程序设置不当。当您使用dat-ng-app时，您在索引模板中使用ng-app。否则，实际上从未使用过角度。

下一个问题出在您的$stateProvider配置中。我不确定您关注哪些文档，但您对状态的配置应如下所示：

    # Set the default state
    $urlRouterProvider.otherwise('/home')

    # Configures home, peopleOne, and peopleTwo states
    $stateProvider
        .state('home', {
          url: '/home',
          templateUrl: 'home.html'
        })
        .state('peopleOne', {
          url: '/peopleOne',
          templateUrl: 'peopleOne.html',
          parent: 'home'
        })
        .state('peopleTwo', {
          url: '/peopleTwo',
          templateUrl: 'peopleTwo.html',
          parent: 'home'
        })

最后，当您在模板中实际创建链接时，我发现使用ui-sref标记更容易，这样您就可以根据州名创建链接。因此，peopleOne州的链接如下所示：<a ui-sref="peopleOne"></a>。

我根据原始代码添加了一个plunker

https://plnkr.co/edit/NazuoFoDOa3VGR6smoyH

单击一个div并使Angular模板在另一个中打开

1 个答案: