使用 angular ui-router 更改 div 的视图

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";
    }
});

它工作正常，但问题是我只更改了一次视图。在 ui-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。此外，如果您想将控制器分配给您的视图，我们会在此处执行此操作。如果愿意，您可以不分配任何控制器、两个不同的控制器或同一个控制器。

然后像这样设置视图：

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

<div ui-view></div>

这是一个有效的 JSFiddle

使用 angular ui-router 更改 div 的视图

changing the view of the div using angular ui-router

javascript

angularjs

angular-routing

angular-ui-router