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

Question

我希望能够单击 #leftDiv 中的锚点并在 #rightDiv[ 中打开 UI 路由器模板=33=]。所以，当我点击 #leftDiv 中的 Hello Plunker 1 时，我想要 peopleOne.html 在 #rightDiv 中打开。当我点击 Hello Plunker 2 时，我希望 peopleTwo.html 替换 peopleOne.html 在 #rightDiv.

这是一个 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 以设置您的路由。您会看到此代码从未被调用过。您的 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'
        })

最后，在模板中实际创建 link 时，我发现使用 ui-sref 标签更容易，它允许您根据状态创建 link姓名。所以 link 到 peopleOne 状态看起来像这样：<a ui-sref="peopleOne"></a>.

我已经根据您的原始代码附加了一个 plunker

https://plnkr.co/edit/NazuoFoDOa3VGR6smoyH