Question

如何在不更改URL /路由的情况下导航视图/部分？我只想要一个网址，以便后面/下一个没有浏览器历史记录。

我尝试了UI-Route，基本上做了我想要的，但是当我使用$ apply方法查看时，地址栏会从'someapp.com'变为'someapp.com/#/' 。它出现在角1.1.5，但不是1.0.7，只在hashbang模式下。我如何摆脱这个URL更改？

谢谢！

编辑：我可以解决问题，现在使用ui-router完成该任务。

Answer 1

你可以控制没有路线的一切。但是如果你想要多个控制器，你将不得不广播共享事件。我的示例使用嵌套控制器方法。

查看：

<div ng-controller="mainCtrl">
    <ul class="nav nav-pills">
        <li ng-class="{active: activeView.view1}">
            <a href="javascript:" ng-click="setView('view1')"> View1 </a>
        </li>
        <li ng-class="{active: activeView.view2}">
            <a href="javascript:" ng-click="setView('view2')"> View2 </a>
        </li>
        <li ng-class="{active: activeView.view3}">
            <a href="javascript:" ng-click="setView('view3')"> View3 </a>
        </li>
    </ul>

    <div>
        <div ng-show="activeView.view1">
            <div ng-controller="view1Ctrl">
            ....
            </div>
        </div>
        <div ng-show="activeView.view2">
            <div ng-controller="view2Ctrl">
            ....
            </div>
        </div>
        <div ng-show="activeView.view3">
            <div ng-controller="view3Ctrl">
            ....
            </div>
        </div>
    </div>
</div>

然后在mainCtrl中：

//Handles the main view set function and broadcasts down to sub-controllers
$scope.setView = function(view) {
    $scope.activeView = {
        view1: false,
        view2: false,
        view3: false
    }
    $scope.activeView[view] = true;
    $scope.$broadcast('setView', view);
};

//Catches the reset view call from sub-controllers and re-broadcasts down
$scope.$on('viewReset', function(scope, view, msg) {
    $scope.setView(view, msg);
})

在subCtrls中：

//Catches the broadcast down and sets vars locally.
$scope.$on('setView', function(scope, view) {
    $scope.activeView = {
        view1: false,
        view2: false,
        view3: false
    }
    $scope.activeView[view] = true;
});

//Emits the message up to the mainCtrl to reset the view in all controllers
$scope.setView = function(view) {
    $scope.$emit('setView', view);
};

没有URL /深层链接的AngularJS应用程序

1 个答案: