javascript - 单击一个div，然后在另一个div中打开Angular模板

我希望能够单击#leftDiv中的锚点，并在#rightDiv中打开UI路由器模板。因此，当我在#leftDiv中单击Hello Plunker 1时，我希望peopleOne.html在#rightDiv中打开。当我单击Hello Plunker 2时，我希望peopleTwo.html替换#rightDiv中的peopleOne.html。

这是一个柱塞-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'
                    }
                },
            })
})

最佳答案

我注意到的一些问题：

首先，在$ 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>。

我已根据您的原始代码附加了一个插件

https://plnkr.co/edit/NazuoFoDOa3VGR6smoyH