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

Question

我希望能够单击 #leftDiv 中的 anchor 并使 UI 路由器模板在 #rightDiv 中打开。因此，当我单击 #leftDiv 中的 Hello Plunker 1 时，我希望在 #rightDiv< 中打开 peopleOne.html/强>。当我点击 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'
                    }
                },
            })
})

Answer 1

我注意到的一些问题:

首先，输入 console.log在 $stateProvider 配置调用之后设置您的路由。您将看到该代码甚至从未被调用。您的 Angular 应用程序设置不正确。您正在使用dat-ng-app在索引模板中，当您应该使用 ng-app 时。否则，永远不会实际使用 Angular 。

下一期在您的 $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