javascript - 使用 angular ui-router 更改 div 的 View

Question

这是我为了改变我的观点而编写的代码(不改变 url)

<a ui-sref="chat.menu" ng-click="click1();">Latest</a>
<a ui-sref="chat.menu" ng-click="click2();">Mail</a>
<div ui-view="{{item}}"></div>

var app = angular.module('myApp',['ui.router'])
    .run(['$rootScope','$state','$stateParams', function($rootScope,$state,$stateParams){
        $rootScope.$state = $state;
        $state.$stateParams = $stateParams;
    }]);


app.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
    .state('home',{
        url:'/',
        templateUrl:'templates/main.html',
    })
    .state('chat',{
        url:'/chat',
        templateUrl:'templates/chatPage.html',
        controller: 'chatController',
    })
    .state('chat.menu',{
        views: {
            '':{
                template: '<h1>Blank</h1>',
            },
            'latest': {
                template: '<h1>Latest</h1>',
            },
            'mail': {
                template: '<h1>Mail</h1>',
            }
        }
    });
});

app.controller('Controller', function($scope,$state, authentication){
    $scope.item='';
    $scope.click1 = function(){
        $scope.item = "latest";

    }
    $scope.click2 = function(){
        $scope.item = "mail";
    }
});

它工作正常，但问题是我只更改了 View 一次。一旦在 ui View 中加载了一个 View ，则单击按钮时不会在其中加载另一个 View 。

我想要的是，当用户点击按钮时， View 应该根据按钮的点击而改变，而 url 没有任何变化。

Answer 1

所以我会尝试这样的事情:有两个状态而不是一个。如果只想保留一个状态，则需要将参数传递给该状态，但对于像这样的简单示例，两个状态就可以正常工作:

myApp.config(function ($stateProvider){
    $stateProvider
    .state("latest", {
        url: "#",
        template: "<h1>Latest</h1>",
        controller: "Ctrl1"
      })
    .state("mail", {
        url: "#",
        template: "<h1>Mail</h1>",
        controller: "Ctrl2"
    });
});

我们在这里所做的是在两种状态下将 URL 设置为相同，或者根本不设置 URL。此外，如果您想将 Controller 分配给您的 View ，我们会在此处执行此操作。如果愿意，您可以不分配任何 Controller 、两个不同的 Controller 或同一个 Controller 。

然后像这样设置你的 View :

<nav> 
    <a ui-sref="latest">Latest</a>
    <a ui-sref="mail">Mail</a>
</nav>

<div ui-view></div>

这是一个有效的 JSFiddle